diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>
diff --git a/src/views/popup/components/camBar.vue b/src/views/popup/components/camBar.vue
new file mode 100644
index 0000000..ef0d000
--- /dev/null
+++ b/src/views/popup/components/camBar.vue
@@ -0,0 +1,181 @@
+<template>
+  <div id="cam-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { cameraTypeStatistics } from '@/api/pop'
+var myChart
+export default {
+  name: 'CamBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['在线数量', '总数量'],
+          orient: 'vertical',
+          right: 10,
+          top: 10
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '在线数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(46,253,0,0.8)' },
+                { offset: 0, color: 'rgba(12,178,0,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(46,253,0,0.8)' },
+                  { offset: 0.7, color: 'rgba(12,178,0,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: []
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '总数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    myChart = echarts.init(document.getElementById('cam-bar'))
+    // const that = this
+    // this.timer = setInterval(function() {
+    //   // 每次向后滚动一个，最后一个从头开始。
+    //   if (that.extend.dataZoom[0].endValue === 23) {
+    //     that.extend.dataZoom[0].endValue = 4
+    //     that.extend.dataZoom[0].startValue = 0
+    //   } else {
+    //     that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+    //     that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+    //   }
+    //   myChart.setOption(that.extend, true)
+    // }, 2000)
+    this.fetchData()
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    fetchData() {
+      cameraTypeStatistics().then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.online)
+          this.extend.series[1].data = response.data.map(item => item.all)
+          this.extend.xAxis.data = response.data.map(item => item.name.replace('摄像头', ''))
+          console.log(this.extend)
+          console.log('wxt')
+          myChart.clear()
+          myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>
diff --git a/src/views/popup/components/camBar.vue b/src/views/popup/components/camBar.vue
new file mode 100644
index 0000000..ef0d000
--- /dev/null
+++ b/src/views/popup/components/camBar.vue
@@ -0,0 +1,181 @@
+<template>
+  <div id="cam-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { cameraTypeStatistics } from '@/api/pop'
+var myChart
+export default {
+  name: 'CamBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['在线数量', '总数量'],
+          orient: 'vertical',
+          right: 10,
+          top: 10
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '在线数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(46,253,0,0.8)' },
+                { offset: 0, color: 'rgba(12,178,0,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(46,253,0,0.8)' },
+                  { offset: 0.7, color: 'rgba(12,178,0,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: []
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '总数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    myChart = echarts.init(document.getElementById('cam-bar'))
+    // const that = this
+    // this.timer = setInterval(function() {
+    //   // 每次向后滚动一个，最后一个从头开始。
+    //   if (that.extend.dataZoom[0].endValue === 23) {
+    //     that.extend.dataZoom[0].endValue = 4
+    //     that.extend.dataZoom[0].startValue = 0
+    //   } else {
+    //     that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+    //     that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+    //   }
+    //   myChart.setOption(that.extend, true)
+    // }, 2000)
+    this.fetchData()
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    fetchData() {
+      cameraTypeStatistics().then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.online)
+          this.extend.series[1].data = response.data.map(item => item.all)
+          this.extend.xAxis.data = response.data.map(item => item.name.replace('摄像头', ''))
+          console.log(this.extend)
+          console.log('wxt')
+          myChart.clear()
+          myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup/components/caseBar.vue b/src/views/popup/components/caseBar.vue
new file mode 100644
index 0000000..421cef1
--- /dev/null
+++ b/src/views/popup/components/caseBar.vue
@@ -0,0 +1,201 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <div id="case-bar" class="container"/>
+    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">
+      <el-tab-pane label="近7天" name="week"/>
+      <el-tab-pane label="近1月" name="month"/>
+      <el-tab-pane label="近3月" name="3month"/>
+      <el-tab-pane label="近1年" name="year"/>
+    </el-tabs>
+<!--    <div style="display: flex;position:absolute;right: 10px;top:6px">-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('week')">近7天</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('month')">近1月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('3month')">近3月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('year')">近1年</el-button>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import { casePieStatistics } from '@/api/pop'
+import * as echarts from 'echarts'
+import { getDayTime } from '@/utils/dateutils'
+export default {
+  name: 'CaseBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      timeRange: [],
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      activeName: 'week',
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '5%',
+          bottom: '1%',
+          top: '2%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'category',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          data: ['离岗', '黑名单', '监控点离线']
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安防事件频率',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'right',
+              distance: 10
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            },
+            data: [0, 2, 20]
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-bar'))
+    this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+    this.listQuery.endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
+    this.changeTime('week')
+    const that = this
+    window.addEventListener('resize', function() {
+      that.myChart.resize()
+    })
+  },
+  methods: {
+    changeTime() {
+      let startTime
+      switch (this.activeName) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd hh:mm:ss')
+      this.fetchData()
+      this.myChart.setOption(this.extend, true)
+    },
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      casePieStatistics(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.value)
+          this.extend.yAxis.data = response.data.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+  height: 20px !important;
+  line-height: 20px !important;
+}
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 6px;
+}
+</style>
+

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>
diff --git a/src/views/popup/components/camBar.vue b/src/views/popup/components/camBar.vue
new file mode 100644
index 0000000..ef0d000
--- /dev/null
+++ b/src/views/popup/components/camBar.vue
@@ -0,0 +1,181 @@
+<template>
+  <div id="cam-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { cameraTypeStatistics } from '@/api/pop'
+var myChart
+export default {
+  name: 'CamBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['在线数量', '总数量'],
+          orient: 'vertical',
+          right: 10,
+          top: 10
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '在线数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(46,253,0,0.8)' },
+                { offset: 0, color: 'rgba(12,178,0,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(46,253,0,0.8)' },
+                  { offset: 0.7, color: 'rgba(12,178,0,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: []
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '总数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    myChart = echarts.init(document.getElementById('cam-bar'))
+    // const that = this
+    // this.timer = setInterval(function() {
+    //   // 每次向后滚动一个，最后一个从头开始。
+    //   if (that.extend.dataZoom[0].endValue === 23) {
+    //     that.extend.dataZoom[0].endValue = 4
+    //     that.extend.dataZoom[0].startValue = 0
+    //   } else {
+    //     that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+    //     that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+    //   }
+    //   myChart.setOption(that.extend, true)
+    // }, 2000)
+    this.fetchData()
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    fetchData() {
+      cameraTypeStatistics().then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.online)
+          this.extend.series[1].data = response.data.map(item => item.all)
+          this.extend.xAxis.data = response.data.map(item => item.name.replace('摄像头', ''))
+          console.log(this.extend)
+          console.log('wxt')
+          myChart.clear()
+          myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup/components/caseBar.vue b/src/views/popup/components/caseBar.vue
new file mode 100644
index 0000000..421cef1
--- /dev/null
+++ b/src/views/popup/components/caseBar.vue
@@ -0,0 +1,201 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <div id="case-bar" class="container"/>
+    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">
+      <el-tab-pane label="近7天" name="week"/>
+      <el-tab-pane label="近1月" name="month"/>
+      <el-tab-pane label="近3月" name="3month"/>
+      <el-tab-pane label="近1年" name="year"/>
+    </el-tabs>
+<!--    <div style="display: flex;position:absolute;right: 10px;top:6px">-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('week')">近7天</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('month')">近1月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('3month')">近3月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('year')">近1年</el-button>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import { casePieStatistics } from '@/api/pop'
+import * as echarts from 'echarts'
+import { getDayTime } from '@/utils/dateutils'
+export default {
+  name: 'CaseBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      timeRange: [],
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      activeName: 'week',
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '5%',
+          bottom: '1%',
+          top: '2%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'category',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          data: ['离岗', '黑名单', '监控点离线']
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安防事件频率',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'right',
+              distance: 10
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            },
+            data: [0, 2, 20]
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-bar'))
+    this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+    this.listQuery.endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
+    this.changeTime('week')
+    const that = this
+    window.addEventListener('resize', function() {
+      that.myChart.resize()
+    })
+  },
+  methods: {
+    changeTime() {
+      let startTime
+      switch (this.activeName) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd hh:mm:ss')
+      this.fetchData()
+      this.myChart.setOption(this.extend, true)
+    },
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      casePieStatistics(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.value)
+          this.extend.yAxis.data = response.data.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+  height: 20px !important;
+  line-height: 20px !important;
+}
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 6px;
+}
+</style>
+
diff --git a/src/views/popup/components/casePie.vue b/src/views/popup/components/casePie.vue
new file mode 100644
index 0000000..685c801
--- /dev/null
+++ b/src/views/popup/components/casePie.vue
@@ -0,0 +1,164 @@
+<!--suppress ALL -->
+<template>
+  <div id="case-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      style="margin-top: 10px"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {casePieStatistics, deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'CasePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '离岗',value: 0 },
+          {name: '黑名单',value: 2 },
+          {name: '监控点离线',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          orient: "vertical",
+          top: 'center',
+          right: 0,
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '70%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            color: '#ff9933',
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}\n{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>事件数量：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('case-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-pie').clientWidth - 10 + 'px'
+    this.search()
+  },
+  methods: {
+    search(){
+      const today = new Date();
+      const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+      casePieStatistics({
+        startTime: day + ' 00:00:00',
+        endTime: day + ' 23:59:59',
+      }).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data.map(item => {
+            item.name.replace('事件', '')
+            return item
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>
diff --git a/src/views/popup/components/camBar.vue b/src/views/popup/components/camBar.vue
new file mode 100644
index 0000000..ef0d000
--- /dev/null
+++ b/src/views/popup/components/camBar.vue
@@ -0,0 +1,181 @@
+<template>
+  <div id="cam-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { cameraTypeStatistics } from '@/api/pop'
+var myChart
+export default {
+  name: 'CamBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['在线数量', '总数量'],
+          orient: 'vertical',
+          right: 10,
+          top: 10
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '在线数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(46,253,0,0.8)' },
+                { offset: 0, color: 'rgba(12,178,0,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(46,253,0,0.8)' },
+                  { offset: 0.7, color: 'rgba(12,178,0,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: []
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '总数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    myChart = echarts.init(document.getElementById('cam-bar'))
+    // const that = this
+    // this.timer = setInterval(function() {
+    //   // 每次向后滚动一个，最后一个从头开始。
+    //   if (that.extend.dataZoom[0].endValue === 23) {
+    //     that.extend.dataZoom[0].endValue = 4
+    //     that.extend.dataZoom[0].startValue = 0
+    //   } else {
+    //     that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+    //     that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+    //   }
+    //   myChart.setOption(that.extend, true)
+    // }, 2000)
+    this.fetchData()
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    fetchData() {
+      cameraTypeStatistics().then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.online)
+          this.extend.series[1].data = response.data.map(item => item.all)
+          this.extend.xAxis.data = response.data.map(item => item.name.replace('摄像头', ''))
+          console.log(this.extend)
+          console.log('wxt')
+          myChart.clear()
+          myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup/components/caseBar.vue b/src/views/popup/components/caseBar.vue
new file mode 100644
index 0000000..421cef1
--- /dev/null
+++ b/src/views/popup/components/caseBar.vue
@@ -0,0 +1,201 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <div id="case-bar" class="container"/>
+    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">
+      <el-tab-pane label="近7天" name="week"/>
+      <el-tab-pane label="近1月" name="month"/>
+      <el-tab-pane label="近3月" name="3month"/>
+      <el-tab-pane label="近1年" name="year"/>
+    </el-tabs>
+<!--    <div style="display: flex;position:absolute;right: 10px;top:6px">-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('week')">近7天</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('month')">近1月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('3month')">近3月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('year')">近1年</el-button>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import { casePieStatistics } from '@/api/pop'
+import * as echarts from 'echarts'
+import { getDayTime } from '@/utils/dateutils'
+export default {
+  name: 'CaseBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      timeRange: [],
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      activeName: 'week',
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '5%',
+          bottom: '1%',
+          top: '2%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'category',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          data: ['离岗', '黑名单', '监控点离线']
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安防事件频率',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'right',
+              distance: 10
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            },
+            data: [0, 2, 20]
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-bar'))
+    this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+    this.listQuery.endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
+    this.changeTime('week')
+    const that = this
+    window.addEventListener('resize', function() {
+      that.myChart.resize()
+    })
+  },
+  methods: {
+    changeTime() {
+      let startTime
+      switch (this.activeName) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd hh:mm:ss')
+      this.fetchData()
+      this.myChart.setOption(this.extend, true)
+    },
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      casePieStatistics(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.value)
+          this.extend.yAxis.data = response.data.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+  height: 20px !important;
+  line-height: 20px !important;
+}
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 6px;
+}
+</style>
+
diff --git a/src/views/popup/components/casePie.vue b/src/views/popup/components/casePie.vue
new file mode 100644
index 0000000..685c801
--- /dev/null
+++ b/src/views/popup/components/casePie.vue
@@ -0,0 +1,164 @@
+<!--suppress ALL -->
+<template>
+  <div id="case-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      style="margin-top: 10px"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {casePieStatistics, deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'CasePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '离岗',value: 0 },
+          {name: '黑名单',value: 2 },
+          {name: '监控点离线',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          orient: "vertical",
+          top: 'center',
+          right: 0,
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '70%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            color: '#ff9933',
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}\n{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>事件数量：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('case-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-pie').clientWidth - 10 + 'px'
+    this.search()
+  },
+  methods: {
+    search(){
+      const today = new Date();
+      const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+      casePieStatistics({
+        startTime: day + ' 00:00:00',
+        endTime: day + ' 23:59:59',
+      }).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data.map(item => {
+            item.name.replace('事件', '')
+            return item
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup/components/inoutList.vue b/src/views/popup/components/inoutList.vue
new file mode 100644
index 0000000..3bb0c24
--- /dev/null
+++ b/src/views/popup/components/inoutList.vue
@@ -0,0 +1,300 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <el-tabs v-model="activeName" @tab-click="changeBuilding" style="margin: 0 20px">
+      <el-tab-pane label="全 部 " name="全部"/>
+      <el-tab-pane label="一期主楼" name="一期主楼"/>
+      <el-tab-pane label="录制楼" name="录制楼"/>
+      <el-tab-pane label="二期主楼" name="二期主楼"/>
+    </el-tabs>
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('一期主楼')" style="margin-left: 3px">一期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('录制楼')">录制楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('二期主楼')">二期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('')">全 部</el-button>-->
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">员工姓名</div>
+          <div class="tr3 th_style">卡号</div>
+          <div class="tr2 th_style">门禁区域</div>
+          <div class="tr1 th_style">进/出</div>
+          <div class="tr1 th_style">通过方式</div>
+          <div class="tr2 th_style" style="width: 20%">通过时间</div>
+          <div class="tr5 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="table_tr" :key="index">
+              <div class="tr1 tr">{{item.staffName}}</div>
+              <div class="tr3 tr">{{item.cardNum}}</div>
+              <div class="tr2 tr">{{item.doorArea}}</div>
+              <div class="tr1 tr">{{item.inoutTypeName}}</div>
+              <div class="tr1 tr">{{item.passWayName}}</div>
+              <div class="tr2 tr" style="width: 20%">{{item.passTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.picture ? `${item.picture}`: defaultPhoto">
+              </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 { getInoutListPage } from '@/api/person'
+export default {
+  name: 'InoutList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 7, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      activeName: '全部',
+      listQuery: {
+        staffKeywords: '',
+        doorKeywords: '',
+        inoutType: '',
+        passWay: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 7
+      }, // 筛选条件
+      columns: [
+        {
+          text: '员工姓名',
+          value: 'staffName',
+          align: 'center'
+        },
+        {
+          text: '卡号',
+          value: 'cardNum',
+          align: 'center'
+        },
+        {
+          text: '门禁区域',
+          value: 'doorArea',
+          align: 'center'
+        },
+        {
+          text: '进/出',
+          value: 'inoutTypeName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过方式',
+          value: 'passWayName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过时间',
+          value: 'passTime',
+          align: 'center'
+        }
+      ], // 显示列
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    const today = new Date()
+    const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+    this.listQuery.startTime = day + ' 00:00:00'
+    this.listQuery.endTime = day + ' 23:59:59'
+    this.fetchData()
+  },
+  methods: {
+    changeBuilding() {
+      this.listQuery.doorKeywords = this.activeName
+      if (this.listQuery.doorKeywords === '全部') {
+        this.listQuery.doorKeywords = ''
+      }
+      this.fetchData(false)
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getInoutListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    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>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 8px;
+  margin-top: 5px;
+}
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 15px;
+}
+.tr {
+  text-overflow: ellipsis;
+  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%;
+}
+.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: 300px;
+  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: 40px;
+  line-height: 40px;
+  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/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>
diff --git a/src/views/popup/components/camBar.vue b/src/views/popup/components/camBar.vue
new file mode 100644
index 0000000..ef0d000
--- /dev/null
+++ b/src/views/popup/components/camBar.vue
@@ -0,0 +1,181 @@
+<template>
+  <div id="cam-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { cameraTypeStatistics } from '@/api/pop'
+var myChart
+export default {
+  name: 'CamBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['在线数量', '总数量'],
+          orient: 'vertical',
+          right: 10,
+          top: 10
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '在线数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(46,253,0,0.8)' },
+                { offset: 0, color: 'rgba(12,178,0,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(46,253,0,0.8)' },
+                  { offset: 0.7, color: 'rgba(12,178,0,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: []
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '总数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    myChart = echarts.init(document.getElementById('cam-bar'))
+    // const that = this
+    // this.timer = setInterval(function() {
+    //   // 每次向后滚动一个，最后一个从头开始。
+    //   if (that.extend.dataZoom[0].endValue === 23) {
+    //     that.extend.dataZoom[0].endValue = 4
+    //     that.extend.dataZoom[0].startValue = 0
+    //   } else {
+    //     that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+    //     that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+    //   }
+    //   myChart.setOption(that.extend, true)
+    // }, 2000)
+    this.fetchData()
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    fetchData() {
+      cameraTypeStatistics().then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.online)
+          this.extend.series[1].data = response.data.map(item => item.all)
+          this.extend.xAxis.data = response.data.map(item => item.name.replace('摄像头', ''))
+          console.log(this.extend)
+          console.log('wxt')
+          myChart.clear()
+          myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup/components/caseBar.vue b/src/views/popup/components/caseBar.vue
new file mode 100644
index 0000000..421cef1
--- /dev/null
+++ b/src/views/popup/components/caseBar.vue
@@ -0,0 +1,201 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <div id="case-bar" class="container"/>
+    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">
+      <el-tab-pane label="近7天" name="week"/>
+      <el-tab-pane label="近1月" name="month"/>
+      <el-tab-pane label="近3月" name="3month"/>
+      <el-tab-pane label="近1年" name="year"/>
+    </el-tabs>
+<!--    <div style="display: flex;position:absolute;right: 10px;top:6px">-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('week')">近7天</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('month')">近1月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('3month')">近3月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('year')">近1年</el-button>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import { casePieStatistics } from '@/api/pop'
+import * as echarts from 'echarts'
+import { getDayTime } from '@/utils/dateutils'
+export default {
+  name: 'CaseBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      timeRange: [],
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      activeName: 'week',
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '5%',
+          bottom: '1%',
+          top: '2%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'category',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          data: ['离岗', '黑名单', '监控点离线']
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安防事件频率',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'right',
+              distance: 10
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            },
+            data: [0, 2, 20]
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-bar'))
+    this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+    this.listQuery.endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
+    this.changeTime('week')
+    const that = this
+    window.addEventListener('resize', function() {
+      that.myChart.resize()
+    })
+  },
+  methods: {
+    changeTime() {
+      let startTime
+      switch (this.activeName) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd hh:mm:ss')
+      this.fetchData()
+      this.myChart.setOption(this.extend, true)
+    },
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      casePieStatistics(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.value)
+          this.extend.yAxis.data = response.data.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+  height: 20px !important;
+  line-height: 20px !important;
+}
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 6px;
+}
+</style>
+
diff --git a/src/views/popup/components/casePie.vue b/src/views/popup/components/casePie.vue
new file mode 100644
index 0000000..685c801
--- /dev/null
+++ b/src/views/popup/components/casePie.vue
@@ -0,0 +1,164 @@
+<!--suppress ALL -->
+<template>
+  <div id="case-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      style="margin-top: 10px"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {casePieStatistics, deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'CasePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '离岗',value: 0 },
+          {name: '黑名单',value: 2 },
+          {name: '监控点离线',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          orient: "vertical",
+          top: 'center',
+          right: 0,
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '70%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            color: '#ff9933',
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}\n{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>事件数量：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('case-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-pie').clientWidth - 10 + 'px'
+    this.search()
+  },
+  methods: {
+    search(){
+      const today = new Date();
+      const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+      casePieStatistics({
+        startTime: day + ' 00:00:00',
+        endTime: day + ' 23:59:59',
+      }).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data.map(item => {
+            item.name.replace('事件', '')
+            return item
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup/components/inoutList.vue b/src/views/popup/components/inoutList.vue
new file mode 100644
index 0000000..3bb0c24
--- /dev/null
+++ b/src/views/popup/components/inoutList.vue
@@ -0,0 +1,300 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <el-tabs v-model="activeName" @tab-click="changeBuilding" style="margin: 0 20px">
+      <el-tab-pane label="全 部 " name="全部"/>
+      <el-tab-pane label="一期主楼" name="一期主楼"/>
+      <el-tab-pane label="录制楼" name="录制楼"/>
+      <el-tab-pane label="二期主楼" name="二期主楼"/>
+    </el-tabs>
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('一期主楼')" style="margin-left: 3px">一期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('录制楼')">录制楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('二期主楼')">二期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('')">全 部</el-button>-->
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">员工姓名</div>
+          <div class="tr3 th_style">卡号</div>
+          <div class="tr2 th_style">门禁区域</div>
+          <div class="tr1 th_style">进/出</div>
+          <div class="tr1 th_style">通过方式</div>
+          <div class="tr2 th_style" style="width: 20%">通过时间</div>
+          <div class="tr5 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="table_tr" :key="index">
+              <div class="tr1 tr">{{item.staffName}}</div>
+              <div class="tr3 tr">{{item.cardNum}}</div>
+              <div class="tr2 tr">{{item.doorArea}}</div>
+              <div class="tr1 tr">{{item.inoutTypeName}}</div>
+              <div class="tr1 tr">{{item.passWayName}}</div>
+              <div class="tr2 tr" style="width: 20%">{{item.passTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.picture ? `${item.picture}`: defaultPhoto">
+              </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 { getInoutListPage } from '@/api/person'
+export default {
+  name: 'InoutList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 7, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      activeName: '全部',
+      listQuery: {
+        staffKeywords: '',
+        doorKeywords: '',
+        inoutType: '',
+        passWay: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 7
+      }, // 筛选条件
+      columns: [
+        {
+          text: '员工姓名',
+          value: 'staffName',
+          align: 'center'
+        },
+        {
+          text: '卡号',
+          value: 'cardNum',
+          align: 'center'
+        },
+        {
+          text: '门禁区域',
+          value: 'doorArea',
+          align: 'center'
+        },
+        {
+          text: '进/出',
+          value: 'inoutTypeName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过方式',
+          value: 'passWayName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过时间',
+          value: 'passTime',
+          align: 'center'
+        }
+      ], // 显示列
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    const today = new Date()
+    const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+    this.listQuery.startTime = day + ' 00:00:00'
+    this.listQuery.endTime = day + ' 23:59:59'
+    this.fetchData()
+  },
+  methods: {
+    changeBuilding() {
+      this.listQuery.doorKeywords = this.activeName
+      if (this.listQuery.doorKeywords === '全部') {
+        this.listQuery.doorKeywords = ''
+      }
+      this.fetchData(false)
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getInoutListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    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>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 8px;
+  margin-top: 5px;
+}
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 15px;
+}
+.tr {
+  text-overflow: ellipsis;
+  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%;
+}
+.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: 300px;
+  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: 40px;
+  line-height: 40px;
+  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/inoutTable.vue b/src/views/popup/components/inoutTable.vue
new file mode 100644
index 0000000..57e46ae
--- /dev/null
+++ b/src/views/popup/components/inoutTable.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :key="index">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+
+export default {
+  name: 'InoutTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+    }
+  },
+
+  // 如果没有父元素传值，将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: {
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 5
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableActionFun()
+        }
+      })
+    }
+  },
+  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: '-'
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>
diff --git a/src/views/popup/components/camBar.vue b/src/views/popup/components/camBar.vue
new file mode 100644
index 0000000..ef0d000
--- /dev/null
+++ b/src/views/popup/components/camBar.vue
@@ -0,0 +1,181 @@
+<template>
+  <div id="cam-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { cameraTypeStatistics } from '@/api/pop'
+var myChart
+export default {
+  name: 'CamBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['在线数量', '总数量'],
+          orient: 'vertical',
+          right: 10,
+          top: 10
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '在线数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(46,253,0,0.8)' },
+                { offset: 0, color: 'rgba(12,178,0,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(46,253,0,0.8)' },
+                  { offset: 0.7, color: 'rgba(12,178,0,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: []
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '总数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    myChart = echarts.init(document.getElementById('cam-bar'))
+    // const that = this
+    // this.timer = setInterval(function() {
+    //   // 每次向后滚动一个，最后一个从头开始。
+    //   if (that.extend.dataZoom[0].endValue === 23) {
+    //     that.extend.dataZoom[0].endValue = 4
+    //     that.extend.dataZoom[0].startValue = 0
+    //   } else {
+    //     that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+    //     that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+    //   }
+    //   myChart.setOption(that.extend, true)
+    // }, 2000)
+    this.fetchData()
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    fetchData() {
+      cameraTypeStatistics().then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.online)
+          this.extend.series[1].data = response.data.map(item => item.all)
+          this.extend.xAxis.data = response.data.map(item => item.name.replace('摄像头', ''))
+          console.log(this.extend)
+          console.log('wxt')
+          myChart.clear()
+          myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup/components/caseBar.vue b/src/views/popup/components/caseBar.vue
new file mode 100644
index 0000000..421cef1
--- /dev/null
+++ b/src/views/popup/components/caseBar.vue
@@ -0,0 +1,201 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <div id="case-bar" class="container"/>
+    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">
+      <el-tab-pane label="近7天" name="week"/>
+      <el-tab-pane label="近1月" name="month"/>
+      <el-tab-pane label="近3月" name="3month"/>
+      <el-tab-pane label="近1年" name="year"/>
+    </el-tabs>
+<!--    <div style="display: flex;position:absolute;right: 10px;top:6px">-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('week')">近7天</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('month')">近1月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('3month')">近3月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('year')">近1年</el-button>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import { casePieStatistics } from '@/api/pop'
+import * as echarts from 'echarts'
+import { getDayTime } from '@/utils/dateutils'
+export default {
+  name: 'CaseBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      timeRange: [],
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      activeName: 'week',
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '5%',
+          bottom: '1%',
+          top: '2%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'category',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          data: ['离岗', '黑名单', '监控点离线']
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安防事件频率',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'right',
+              distance: 10
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            },
+            data: [0, 2, 20]
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-bar'))
+    this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+    this.listQuery.endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
+    this.changeTime('week')
+    const that = this
+    window.addEventListener('resize', function() {
+      that.myChart.resize()
+    })
+  },
+  methods: {
+    changeTime() {
+      let startTime
+      switch (this.activeName) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd hh:mm:ss')
+      this.fetchData()
+      this.myChart.setOption(this.extend, true)
+    },
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      casePieStatistics(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.value)
+          this.extend.yAxis.data = response.data.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+  height: 20px !important;
+  line-height: 20px !important;
+}
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 6px;
+}
+</style>
+
diff --git a/src/views/popup/components/casePie.vue b/src/views/popup/components/casePie.vue
new file mode 100644
index 0000000..685c801
--- /dev/null
+++ b/src/views/popup/components/casePie.vue
@@ -0,0 +1,164 @@
+<!--suppress ALL -->
+<template>
+  <div id="case-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      style="margin-top: 10px"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {casePieStatistics, deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'CasePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '离岗',value: 0 },
+          {name: '黑名单',value: 2 },
+          {name: '监控点离线',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          orient: "vertical",
+          top: 'center',
+          right: 0,
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '70%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            color: '#ff9933',
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}\n{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>事件数量：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('case-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-pie').clientWidth - 10 + 'px'
+    this.search()
+  },
+  methods: {
+    search(){
+      const today = new Date();
+      const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+      casePieStatistics({
+        startTime: day + ' 00:00:00',
+        endTime: day + ' 23:59:59',
+      }).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data.map(item => {
+            item.name.replace('事件', '')
+            return item
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup/components/inoutList.vue b/src/views/popup/components/inoutList.vue
new file mode 100644
index 0000000..3bb0c24
--- /dev/null
+++ b/src/views/popup/components/inoutList.vue
@@ -0,0 +1,300 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <el-tabs v-model="activeName" @tab-click="changeBuilding" style="margin: 0 20px">
+      <el-tab-pane label="全 部 " name="全部"/>
+      <el-tab-pane label="一期主楼" name="一期主楼"/>
+      <el-tab-pane label="录制楼" name="录制楼"/>
+      <el-tab-pane label="二期主楼" name="二期主楼"/>
+    </el-tabs>
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('一期主楼')" style="margin-left: 3px">一期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('录制楼')">录制楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('二期主楼')">二期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('')">全 部</el-button>-->
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">员工姓名</div>
+          <div class="tr3 th_style">卡号</div>
+          <div class="tr2 th_style">门禁区域</div>
+          <div class="tr1 th_style">进/出</div>
+          <div class="tr1 th_style">通过方式</div>
+          <div class="tr2 th_style" style="width: 20%">通过时间</div>
+          <div class="tr5 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="table_tr" :key="index">
+              <div class="tr1 tr">{{item.staffName}}</div>
+              <div class="tr3 tr">{{item.cardNum}}</div>
+              <div class="tr2 tr">{{item.doorArea}}</div>
+              <div class="tr1 tr">{{item.inoutTypeName}}</div>
+              <div class="tr1 tr">{{item.passWayName}}</div>
+              <div class="tr2 tr" style="width: 20%">{{item.passTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.picture ? `${item.picture}`: defaultPhoto">
+              </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 { getInoutListPage } from '@/api/person'
+export default {
+  name: 'InoutList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 7, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      activeName: '全部',
+      listQuery: {
+        staffKeywords: '',
+        doorKeywords: '',
+        inoutType: '',
+        passWay: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 7
+      }, // 筛选条件
+      columns: [
+        {
+          text: '员工姓名',
+          value: 'staffName',
+          align: 'center'
+        },
+        {
+          text: '卡号',
+          value: 'cardNum',
+          align: 'center'
+        },
+        {
+          text: '门禁区域',
+          value: 'doorArea',
+          align: 'center'
+        },
+        {
+          text: '进/出',
+          value: 'inoutTypeName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过方式',
+          value: 'passWayName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过时间',
+          value: 'passTime',
+          align: 'center'
+        }
+      ], // 显示列
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    const today = new Date()
+    const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+    this.listQuery.startTime = day + ' 00:00:00'
+    this.listQuery.endTime = day + ' 23:59:59'
+    this.fetchData()
+  },
+  methods: {
+    changeBuilding() {
+      this.listQuery.doorKeywords = this.activeName
+      if (this.listQuery.doorKeywords === '全部') {
+        this.listQuery.doorKeywords = ''
+      }
+      this.fetchData(false)
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getInoutListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    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>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 8px;
+  margin-top: 5px;
+}
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 15px;
+}
+.tr {
+  text-overflow: ellipsis;
+  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%;
+}
+.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: 300px;
+  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: 40px;
+  line-height: 40px;
+  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/inoutTable.vue b/src/views/popup/components/inoutTable.vue
new file mode 100644
index 0000000..57e46ae
--- /dev/null
+++ b/src/views/popup/components/inoutTable.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :key="index">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+
+export default {
+  name: 'InoutTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+    }
+  },
+
+  // 如果没有父元素传值，将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: {
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 5
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableActionFun()
+        }
+      })
+    }
+  },
+  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: '-'
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup/components/visitList.vue b/src/views/popup/components/visitList.vue
new file mode 100644
index 0000000..ef3232e
--- /dev/null
+++ b/src/views/popup/components/visitList.vue
@@ -0,0 +1,175 @@
+<template>
+  <div style="width: 500px;height: 100%">
+    <normal-table
+      class="pop-table"
+      style="margin: -5px 0"
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :color-row="colorRow"
+      :tools-option="tableOption.toolsOption"
+      size="mini"
+      :page-sizes="[5]"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="访客照片" align="center" width="120">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.picUri ? `${scope.row.picUri}`: defaultPhoto" :preview-src-list="srcList" width="50" height="50" style="width: 50px; height: 50px;margin-top: 10px" @error="errorImg"/>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </div>
+</template>
+
+<script>
+import NormalTable from '@/components/NormalTable'
+import { getVisitListPage } from '@/api/visitor'
+
+export default {
+  name: 'VisitList',
+  components: { NormalTable },
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      srcList: [],
+      listQuery: {
+        keywords: '',
+        visitReason: '',
+        position: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 5
+      }, // 筛选条件
+      columns: [
+        {
+          text: '访客姓名',
+          value: 'visitorName',
+          align: 'center'
+        },
+        {
+          text: '进入时间',
+          value: 'inTime',
+          align: 'center'
+        },
+        {
+          text: '访问区域',
+          value: 'visitPosition',
+          align: 'center'
+        },
+        {
+          text: '离开时间',
+          value: 'outTime',
+          align: 'center'
+        },
+        {
+          text: '累计访问次数(次)',
+          value: 'frequency',
+          align: 'center'
+        }
+      ], // 显示列
+      dialogFormVisible: false, // 是否显示编辑框
+      dialogFormVisible1: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      reasonList: [],
+      areaList: [],
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    trail(row) {
+      this.dialogFormVisible1 = true
+      this.$refs.trailDialog.initDialog(row.picUri, row.visitorName)
+    },
+    encrypIdCardNo(idCard) {
+      if (idCard.length > 6) {
+        return idCard.substr(0, 6) + '********' + idCard.substr(14)
+      } else if (idCard) {
+        return idCard
+      } else {
+        return ''
+      }
+    },
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getVisitListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.list = response.data.rows.map(item => {
+            item.IDcardm = this.encrypIdCardNo(item.idCard)
+            return item
+          })
+          this.srcList = response.data.rows.map(item => item.picUri)
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        }
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.listQuery = {
+        keywords: '',
+        visitReason: '',
+        area: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 10
+      }
+      this.timeRange = []
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pop-table{
+  ::v-deep {
+    .el-table .el-table__expanded-cell {
+      background: #0D3F7E9D !important;
+    }
+  }
+}
+</style>

diff --git a/src/assets/global_images/photo_offline.png b/src/assets/global_images/photo_offline.png
new file mode 100644
index 0000000..31e1ed1
--- /dev/null
+++ b/src/assets/global_images/photo_offline.png
Binary files differ
diff --git a/src/assets/images/1.png b/src/assets/images/1.png
new file mode 100644
index 0000000..a2fdcc6
--- /dev/null
+++ b/src/assets/images/1.png
Binary files differ
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
new file mode 100644
index 0000000..16310cc
--- /dev/null
+++ b/src/assets/images/2.png
Binary files differ
diff --git a/src/assets/popup/baoan.png b/src/assets/popup/baoan.png
new file mode 100644
index 0000000..677732a
--- /dev/null
+++ b/src/assets/popup/baoan.png
Binary files differ
diff --git a/src/assets/popup/cam.png b/src/assets/popup/cam.png
new file mode 100644
index 0000000..04ec63d
--- /dev/null
+++ b/src/assets/popup/cam.png
Binary files differ
diff --git a/src/assets/popup/visitor.png b/src/assets/popup/visitor.png
new file mode 100644
index 0000000..2ea993f
--- /dev/null
+++ b/src/assets/popup/visitor.png
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\266.png" "b/src/assets/popup/\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..8f2ac29
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\272\213\344\273\2661.png" "b/src/assets/popup/\344\272\213\344\273\2661.png"
new file mode 100644
index 0000000..f288b02
--- /dev/null
+++ "b/src/assets/popup/\344\272\213\344\273\2661.png"
Binary files differ
diff --git "a/src/assets/popup/\351\227\270\346\234\272.png" "b/src/assets/popup/\351\227\270\346\234\272.png"
new file mode 100644
index 0000000..cd3ff3f
--- /dev/null
+++ "b/src/assets/popup/\351\227\270\346\234\272.png"
Binary files differ
diff --git a/src/views/popup-pre/board.vue b/src/views/popup-pre/board.vue
new file mode 100644
index 0000000..0f47c22
--- /dev/null
+++ b/src/views/popup-pre/board.vue
@@ -0,0 +1,665 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      人员轨迹追踪
+      <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="80px">
+      <el-row :gutter="20">
+        <el-col :span="12" class="form-item-person-info">
+          <el-form-item label="人员信息" prop="personName" style="position:relative">
+            <el-select
+              v-model="listQuery.personName"
+              value-key="personName"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              :popper-append-to-body="false"
+              @change="handlePerson"
+            >
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.staffCode"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="listQuery.timeRange"
+              type="datetimerange"
+              range-separator="至"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              start-placeholder="起始时间"
+              end-placeholder="终止时间"
+              size="small"
+              :clearable="false"
+              style="width:98%;"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="position:relative">
+        <el-col :span="10">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <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>
+        <el-col :span="6" style="margin-top:4px;display:flex;padding-left:34px">
+          <el-button type="primary" size="small" style="margin-right:10px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:10px" @click="clearInput">
+            重置
+          </el-button>
+          <el-button type="primary" size="small" style="margin-right:10px" @click="onwall">
+            驾驶舱轨迹上图
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 列表显示 -->
+    <div class="list-wrap">
+      <div class="main">
+        <div v-for="item in list" :key="item" class="row">
+          <div v-for="child in item" :key="child" class="list-item">
+            <div class="img-wrap">
+              <img :src="child.facePicUrl" style="width:100%;height:100%">
+            </div>
+            <div class="title text-over">
+              {{ child.positionName ? child.positionName : '' }}
+            </div>
+            <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">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:145px">
+              {{ child.similarity ? child.similarity : '0%' }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hikPic, userList } from '@/api/person'
+import { getCameraList } from '@/api/device'
+import moreSelect from './components/selectTree'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personName: '',
+      staffCode: '',
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '50', // 相似度
+        timeRange: [] // 时间范围
+      },
+      personNameList: [
+        // {
+        //   "personName": "郑11",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "personPicture": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [
+        // {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // },
+        //   {
+        //     "personName": "邓榆琦",
+        //     "personNo": "",
+        //     "facePicUrl": "http://192.168.10.20:6120/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133&AccessKeyId=jywwkycnwtrffadkoukmmzfnnbznuwifuhbgfetbzliellqbhanvcujpwkes&Expires=1676250511&Signature=2XC8RMf72aR6Sz90iWN/ngFteuI=",
+        //     "personType": "访客",
+        //     "picUri": "/pic?did=2&bid=788465&pid=1073741844&size=19037&ptime=1676249133",
+        //     "serverIndexCode": "9013380a-6657-4ef4-b0cd-73c2056398e2",
+        //     "staffCode": ""
+        // }
+      ],
+      wallList: '',
+      rules: {
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: ['blur', 'change'] }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' },
+          { pattern: /\b[5-9]\d{0,1}\b|\b100\b/, message: '最小相似度区间为50-100之间' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'listQuery.timeRange'(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
+    // 获取下拉树形点位数据
+    getSelectedValue(val) {
+      this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
+    },
+    // select远程搜索方法
+    remoteMethod(query) {
+      if (query !== '') {
+        this.selectLoading = true
+        this.handleGetUserList(query)
+      } else {
+        this.personNameList = []
+      }
+    },
+    // 赋值select参数
+    handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
+      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
+          return
+        }
+      })
+    },
+    // 获取点位树
+    handlePointTreeData() {
+      getCameraList({ keywords: '' }).then(response => {
+        this.resourceTreeList = response.data
+      })
+    },
+    // 处理返回显示列表数据
+    handleListOrder(list, num = 2) {
+      const len = list.length
+      const lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1)
+      const newArr = []
+      for (let i = 0; i < lineNum; i++) {
+        const temp = list.slice(i * num, i * num + num)
+        newArr.push(temp)
+      }
+      return newArr
+    },
+    // 人员搜索
+    handleGetUserList(keywords) {
+      userList({ keywords }).then(response => {
+        this.personNameList = response.data
+        this.selectLoading = false
+      })
+    },
+    // 搜索请求发起
+    fetchData() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
+      console.log(postData)
+      hikPic(postData).then(response => {
+        loading.close()
+        if (response.code === 200) {
+          // this.list = response.data
+          this.wallList = JSON.stringify(response.data)
+          this.list = this.handleListOrder(response.data)
+        }
+      }).catch(e => {
+        loading.close()
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.ruleForm.clearValidate()
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.staffCode = ''
+      this.list = []
+    },
+    // 轨迹上墙
+    onwall() {
+      if (this.list.length === 0) {
+        this.$message.warning('无记录上图，请重新搜索!')
+        return
+      }
+      const params = {
+        type: 'onwall-' + this.listQuery.personName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log(response)
+        }
+      })
+    },
+    // 搜索
+    search() {
+      console.log(this.listQuery)
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.fetchData()
+        } else {
+          this.$message.warning('请按要求填写查询条件！')
+          return
+        }
+      })
+      console.log(this.listQuery)
+    }
+  }
+}
+</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-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;
+  position: relative;
+  overflow: hidden;
+  .header{
+    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;
+    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-pre/bottom.vue b/src/views/popup-pre/bottom.vue
new file mode 100644
index 0000000..e3fe7e2
--- /dev/null
+++ b/src/views/popup-pre/bottom.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="bottom">
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
+      <visit-bar 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>
+    <div class="block1">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
+      <staff-bar1 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';
+
+export default {
+  name: 'Bottom',
+  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: [2156, 2144, 455, 314, 98]
+    }
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.bottom{
+  width: 100%;
+  height: 220px;
+  display: flex;
+  overflow: hidden;
+  padding: 0px 0px;
+  .block{
+    flex: 1;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .block1{
+    width: 500px;
+    height: 100%;
+    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: 0px 10px;
+    flex-direction: column;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 100%;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+
+  }
+}
+</style>
diff --git a/src/views/popup-pre/case.vue b/src/views/popup-pre/case.vue
new file mode 100644
index 0000000..20ad52a
--- /dev/null
+++ b/src/views/popup-pre/case.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="case">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" v-if="isbig" class="bigpic" @error="errorImg" @click="isbig=false"/>
+    <div style="height: 58%;display: flex;flex-wrap: wrap">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">事件详情</div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">基本信息</div>
+<!--      v-if="alarm.eventPicture!==''" -->
+      <div class="pic">
+        <el-image :src="alarm.eventPicture ? `${alarm.eventPicture}`: defaultPhoto" width="210px" height="210px" style="width: 210px; height: 210px;margin-left: 20px" @error="errorImg" @click="isbig=true"/>
+      </div>
+      <div class="pic">
+        <div class="name" style="width: 100%">事件描述：<span class="value">{{alarm.description}}</span></div>
+        <div class="name" style="width: 100%">发生时间：<span class="value">{{alarm.updateTime}}</span></div>
+        <div class="name" style="width: 100%">事件类别：<span class="value">{{alarm.typeName}}</span></div>
+        <div class="name" style="width: 100%">危险级别：
+          <span v-if="alarm.levelName==='较大'" class="value" style="margin-left:-2px;color: #ff9933">{{alarm.levelName}}</span>
+          <span v-else-if="alarm.levelName==='一般'" class="value" style="margin-left:-2px;color: #9b9b9b">{{alarm.levelName}}</span>
+          <span v-else class="value" style="margin-left:-2px;color: red">{{alarm.levelName}}</span>
+        </div>
+        <div class="name" style="width: 100%;display: flex;justify-content: space-between;">
+          <span>事件操作：</span>
+          <el-select v-model="alarm.status" size="small" style="flex: 1;margin-top: -2px;" placeholder="事件状态" @change="edit()">
+            <el-option label="未解决" value="1"/>
+            <el-option label="解决中" value="2"/>
+            <el-option label="已解决" value="3"/>
+          </el-select>
+        </div>
+      </div>
+      <div class="name" style="width: 100%">识别设备：<span class="value">{{alarm.devName}}</span></div>
+
+      <div class="name" >所在楼栋：<span class="value">{{alarm.positionName}}</span></div>
+      <div class="name" >所在楼层：<span class="value">{{alarm.areaName}}</span></div>
+      <div class="name" :style="{width:'100%'}">事件位置：<span class="value">{{alarm.detailLocation}}</span></div>
+    </div>
+    <div class="block" id="case-video">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">监控视频</div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDrawNoCase} from '@/api/pop'
+import { repostSocket } from '@/api/common'
+import { updateCase } from '@/api/case'
+
+export default {
+  name: 'Case',
+  data() {
+    return {
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      item: require('@/assets/popup/item.png'), // 背景图片
+      statusList: [],
+      isbig: false,
+      alarm: {
+        area: '',
+        areaName: '',
+        categoryLevelCode: '',
+        createTime: '',
+        description: '',
+        detailLocation: '',
+        devName: '',
+        deviceCode: '',
+        drawNo: '',
+        eventPicture: '',
+        happenTime: '',
+        hazardLevelCode: '',
+        hikEventType: '',
+        id: '',
+        indexCode: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        levelName: '',
+        position: '',
+        positionName: '',
+        status: '',
+        statusName: '',
+        typeName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async reload() {
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+    },
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        this.isbig = false
+        getDrawNoCase(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.alarm = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 + 30)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.alarm.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {}
+      })
+    },
+    edit() {
+      this.$confirm(
+        '确定要修改该事件状态吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const data = {
+          id: this.alarm.id,
+          status: this.alarm.status
+        }
+        updateCase(data).then(response => {
+          if (response.code === 200) {
+            this.$message.success('修改成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.bigpic{
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 480px;
+  z-index: 999999999;
+}
+.pic{
+  width: 48%;
+}
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.case{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 40%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 48%;
+    height: 34px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin: 5px;
+    padding-top: 4px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/components/areaBar.vue b/src/views/popup-pre/components/areaBar.vue
new file mode 100644
index 0000000..b7b0705
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="area-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+var SData1 = [10, 13, 1, 18, 15, 19, 18, 10, 16, 14, 10, 12,10, 13, 10, 18, 15, 19, 18, 10, 16, 14, 10, 12];
+var SData = [20, 13, 30, 28, 35, 29, 18, 20, 26, 24, 30, 32,20, 13, 3, 28, 35, 29, 18, 2, 26, 24, 3, 32];
+var SData2 = [12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16,12,16,18,19,14,16]
+export default {
+  name: 'AreaBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['重大', '较大', '一般']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        dataZoom: [{
+          show: false,
+          xAxisIndex: [0],
+          type: 'slider',
+          startValue: 0,
+          endValue: 4
+        }],
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '重大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(184,215,243,0.8)' },
+                { offset: 0.3, color: '#188df0cc' },
+                { offset: 0, color: '#188df0cc' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7cc' },
+                  { offset: 0.7, color: '#2378f7cc' },
+                  { offset: 1, color: 'rgba(184,215,243,0.8)' }
+                ])
+              }
+            },
+            data: SData
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '较大',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0,253,232,0.8)' },
+                  { offset: 0.7, color: 'rgba(0,178,172,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: SData1
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '一般',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: SData2
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    var myChart = echarts.init(document.getElementById('area-bar'))
+    const that = this
+    this.timer = setInterval(function() {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (that.extend.dataZoom[0].endValue === 23) {
+        that.extend.dataZoom[0].endValue = 4
+        that.extend.dataZoom[0].startValue = 0
+      } else {
+        that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+        that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+      }
+      myChart.setOption(that.extend, true)
+    }, 2000)
+    myChart.clear()
+    myChart.setOption(that.extend, true)
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/areaBar1.vue b/src/views/popup-pre/components/areaBar1.vue
new file mode 100644
index 0000000..ef396ff
--- /dev/null
+++ b/src/views/popup-pre/components/areaBar1.vue
@@ -0,0 +1,186 @@
+<template>
+  <div id="area-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreKeyArea} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['重点区域防控评分', '环比值']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '0%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: [
+          {
+            name: '重点区域防控评分',
+            position: 'left',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          },
+          {
+            name: '环比值',
+            position: 'right',
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#cce9ff'
+              }
+            },
+            axisLabel: {
+              color: '#cce9ff'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '重点区域防控评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(10,25,124,0.0)' },
+                { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: 'rgba(0,178,172,0.8)' }
+              ])
+            }
+          },
+          {
+            name: '环比值',
+            yAxisIndex: 1,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            color: 'rgba(255,190,68,1)',
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0.5,
+                  color: 'rgba(255,190,68,0.7)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(10,25,124,0.2)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'insideBottom'
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('area-bar1'))
+    this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('area-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('area-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '重点区域防控评分' }
+      multiScoreKeyArea().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.series[1].data = response.data.map(item => item.ringRatio)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/caseTable.vue b/src/views/popup-pre/components/caseTable.vue
new file mode 100644
index 0000000..a1809a5
--- /dev/null
+++ b/src/views/popup-pre/components/caseTable.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+
+export default {
+  name: 'CaseTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      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: {
+    checkCell(val, index) {
+      if (val.statusName === '未解决' || val.statusName === '解决中') {
+        switch (val.levelName) {
+          case '重大':
+            return 'hard-state'
+          case '较大':
+            return 'medium-state'
+          default:
+            return 'low-state'
+        }
+      } else if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 15
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup-pre/components/floorPie.vue b/src/views/popup-pre/components/floorPie.vue
new file mode 100644
index 0000000..139d270
--- /dev/null
+++ b/src/views/popup-pre/components/floorPie.vue
@@ -0,0 +1,171 @@
+<!--suppress ALL -->
+<template>
+  <div id="floor-pie" class="container">
+    <el-image :src="require('@/assets/popup/round1.png')" class="round" mode="fill" />
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'FloorPie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '在线',value: 70 },
+          {name: '离线',value: 20 },
+          {name: '故障',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          top: '0%',
+          left: 'center',
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['45%', '60%'],
+          center: ['50%', '60%'],
+          avoidLabelOverlap: false,
+          // label: {
+          //   show: true,
+          //   color: '#0270b2',
+          //   fontSize: 14,
+          //   fontWeight: 'bold',
+          //   position: 'outside',
+          //   formatter: '{name|{b}}:{value|{c}}',
+          //   distanceToLabelLine: 2,
+          //   rich: {}
+          // },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>设备状态：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+        // labelMap: {
+        //   'name': '单位',
+        //   'value': '用量'
+        // },
+        // dimension: 'name',
+        // metrics: 'value'
+      }
+    }
+  },
+  // watch: {
+  //   query: {
+  //     handler: function() {
+  //       this.listQuery.buildingType = this.query.value
+  //       this.fetchData()
+  //     },
+  //     deep: true
+  //   }
+  // },
+  mounted() {
+    this.height = document.getElementById('floor-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('floor-pie').clientWidth - 10 + 'px'
+  },
+  methods: {
+    initData(params){
+      deviceStatus(params).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows[0].value = response.data.filter(item => item.status === '1')[0] ? response.data.filter(item => item.status === '1')[0].quantity : 0
+          this.chartData.rows[1].value = response.data.filter(item => item.status === '2')[0] ? response.data.filter(item => item.status === '2')[0].quantity : 0
+          this.chartData.rows[2].value = response.data.filter(item => item.status === '3')[0] ? response.data.filter(item => item.status === '3')[0].quantity : 0
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup-pre/components/otherLine.vue b/src/views/popup-pre/components/otherLine.vue
new file mode 100644
index 0000000..a839e8d
--- /dev/null
+++ b/src/views/popup-pre/components/otherLine.vue
@@ -0,0 +1,144 @@
+<template>
+  <div id="other-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { multiScoreOther } from '@/api/pop'
+export default {
+  name: 'OtherLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '其他相关安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          // show: false,
+          data: ['其他相关安防评分'],
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: '#0156b755'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255,190,68,0.4)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>其他相关安防评分：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('other-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('other-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      multiScoreOther().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '其他相关安防评分' }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/personTable.vue b/src/views/popup-pre/components/personTable.vue
new file mode 100644
index 0000000..601eb56
--- /dev/null
+++ b/src/views/popup-pre/components/personTable.vue
@@ -0,0 +1,273 @@
+<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 { getStaffListPage, hikPic } from '@/api/person'
+import { repostSocket } from '@/api/common';
+import { getDate } from '@/utils/calendarUtil'
+
+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,
+      wallList: '',
+      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 = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
+        facePicUrl: item.picture, // 图片url
+        startTime: getDate(-31, 'SECOND'), // 开始时间
+        endTime: getDate(0, 'SECOND'), // 结束时间
+        minSimilarity: '50' // 相似度
+      }
+      hikPic(params).then(response => {
+        if (response.code === 200) {
+          this.wallList = JSON.stringify(response.data)
+          if (response.data.length === 0) {
+            this.$message.warning('该人员近一个月无记录!')
+            return
+          } else {
+            this.onwall(item)
+          }
+        }
+      })
+    },
+    // 轨迹上墙
+    onwall(item) {
+      const params = {
+        type: 'onwall-' + item.staffName,
+        message: this.wallList
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2',
+        offset: 1,
+        limit: 50,
+        keywords: '',
+        cardNum: '',
+        phone: ''
+      }
+      getStaffListPage(params).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          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-pre/components/powerLine.vue b/src/views/popup-pre/components/powerLine.vue
new file mode 100644
index 0000000..0527f08
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine.vue
@@ -0,0 +1,175 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      isShow: true,
+      title: {
+        text: '机动力量',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        grid: {
+          bottom: '2%',
+          top: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: '#82b4dc',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: 'rgba(255,190,68,0.4)'
+              },
+              {
+                offset: 0.5,
+                color: '#0156b755'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10%']
+          },
+          formatter: function(params, ticket, callback) {
+            return params[0].data[0] + '点<br>机动力量：' + params[0].data[1]
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {time: item.time}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['time', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'time':'月份'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['time', '机动力量']
+      this.chartSettings.metrics = ['机动力量']
+      this.chartSettings.labelMap = { 'time': '月份' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '机动力量': '0.9' },
+        { time: '1', '机动力量': '0.9' },
+        { time: '2', '机动力量': '0.8' },
+        { time: '3', '机动力量': '0.75' },
+        { time: '4', '机动力量': '0.88' },
+        { time: '5', '机动力量': '0.78' },
+        { time: '6', '机动力量': '0.86' },
+        { time: '7', '机动力量': '0.82' },
+        { time: '8', '机动力量': '0.94' },
+        { time: '9', '机动力量': '0.96' },
+        { time: '10', '机动力量': '0.94' },
+        { time: '11', '机动力量': '0.92' },
+        { time: '12', '机动力量': '0.95' },
+        { time: '13', '机动力量': '0.87' },
+        { time: '14', '机动力量': '0.92' },
+        { time: '15', '机动力量': '0.91' },
+        { time: '16', '机动力量': '0.9' },
+        { time: '17', '机动力量': '0.9' },
+        { time: '18', '机动力量': '0.92' },
+        { time: '19', '机动力量': '0.85' },
+        { time: '20', '机动力量': '0.88' },
+        { time: '21', '机动力量': '0.86' },
+        { time: '22', '机动力量': '0.87' },
+        { time: '23', '机动力量': '0.89' }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/powerLine1.vue b/src/views/popup-pre/components/powerLine1.vue
new file mode 100644
index 0000000..016a21c
--- /dev/null
+++ b/src/views/popup-pre/components/powerLine1.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="power-line" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { multiScorePatrol } from '@/api/pop'
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '巡视安防评分',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '日期' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '12%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          top: '0px',
+          data: ['巡视安防评分'],
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'insideRight'
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('power-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('power-line').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '日期', 'score': '巡视安防评分' }
+      multiScorePatrol().then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
diff --git a/src/views/popup-pre/components/reqairTable.vue b/src/views/popup-pre/components/reqairTable.vue
new file mode 100644
index 0000000..7aaf113
--- /dev/null
+++ b/src/views/popup-pre/components/reqairTable.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr3 th_style">设备名称</div>
+          <div class="tr3 th_style">设备编号</div>
+          <div class="tr3 th_style">总维修次数</div>
+          <div class="tr3 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">
+              <div class="tr3 tr">{{item.name}}</div>
+              <div class="tr3 tr">{{item.code}}</div>
+              <div class="tr3 tr">{{item.num}}</div>
+              <div class="tr3 tr">{{item.time}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getCaseList } from '@/api/case'
+
+export default {
+  name: 'ReqairTable',
+  components: {},
+  data() {
+    return {
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+
+      // 需要根据情况设置的参数
+      title: '排产进度',
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 35, // 每行的实际高度（包含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()
+    this.tableActionFun()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    fetchData() {
+      // getCaseList({}).then(response => {
+      //   if (response.code === 200) {
+      //     this.tableList = response.data
+      //   }
+      // })
+      this.tableList = [
+        {
+          id: '',
+          code: 'YQ-001',
+          name: '一期主楼西门',
+          num: '1',
+          time: '93'
+        }
+      ]
+      for ( let i = 0; i < 10; i++) {
+        this.tableList.push(this.tableList[0])
+      }
+    },
+    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>
+.flowTable {
+  width: 100%;
+  height: 160px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 15%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 25%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+
+.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: 155px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 25px;
+  line-height: 25px;
+  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: 25px;
+  line-height: 25px;
+  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-pre/components/selectTree.vue b/src/views/popup-pre/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup-pre/components/selectTree.vue
@@ -0,0 +1,226 @@
+<!--
+ * @Description: 封装组件 el-select & el-tree 下拉树形选择
+-->
+<template>
+  <el-select
+    ref="selectTree"
+    size="small"
+    :placeholder="placeholder"
+    :value="value"
+    v-model="valueName"
+    :multiple="multiple"
+    :clearable="clearable"
+    @clear="clearHandle"
+    @change="changeValue"
+  >
+    <el-option :value="valueName" class="options">
+      <el-tree
+        style="height:200px;overflow-y:auto"
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        @node-click="handleNodeClick"
+      >
+        <span slot-scope="{ data }">
+          <i
+            :class="[data.color != null ? 'ification_col' : '']"
+            :style="{ 'background-color': data.color }"
+          />&nbsp;&nbsp;{{ data[props.label] }}
+        </span>
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: 'el-tree-select',
+  props: {
+    // 配置项
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: 'id',
+          children: 'children',
+          label: 'name'
+        }
+      }
+    },
+    // 选项列表数据(树形结构的对象数组)
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 初始值（单选）
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 初始值（多选）
+    valueMultiple: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 可清空选项
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    // 自动收起
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultValue: [], // 传给父组件的数组对象值
+      valueName: this.multiple ? [] : '' // 输入框显示值
+    }
+  },
+  watch: {
+    value() {
+      this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+      this.initHandle()
+    }
+  },
+  mounted() {
+    this.resultValue = this.multiple ? this.valueMultiple : this.value // 初始值
+    this.initHandle()
+  },
+  methods: {
+    // 初始化显示
+    initHandle() {
+      if (this.resultValue) {
+        if (this.multiple) {
+          // 多选
+          this.resultValue.forEach((item) => this.valueName.push(item.name))
+        } else {
+          // 单选
+          this.valueName = this.resultValue.name
+        }
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        const scrollWrap = document.querySelectorAll(
+          '.el-scrollbar .el-select-dropdown__wrap'
+        )[0]
+        const scrollBar = document.querySelectorAll(
+          '.el-scrollbar .el-scrollbar__bar'
+        )
+        scrollWrap.style.cssText =
+          'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach((ele) => (ele.style.width = 0))
+      })
+    },
+    // 切换选项
+    handleNodeClick(node) {
+      // 点击叶子节点后被选中
+      if (node.children == null || node.children === undefined) {
+        if (this.multiple) {
+          // 多选（判重后添加）
+          let num = 0
+          this.valueName.forEach((item) => {
+            item === node[this.props.label] ? num++ : num
+          })
+          if (num === 0) {
+            this.valueName.push(node[this.props.label]) // 输入框显示值
+            this.resultValue.push(node)
+          }
+        } else {
+          // 单选
+          this.$refs.selectTree.blur()
+          this.valueName = node[this.props.label]
+          this.resultValue = node
+        }
+
+        this.$emit('getValue', this.resultValue)
+      }
+    },
+    // 从输入框中直接删除某个值时
+    changeValue(val) {
+      if (this.multiple) {
+        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
+        this.resultValue.map((item, index) => {
+          const i = val.indexOf(item.name)
+          if (i === -1) {
+            this.resultValue.splice(index, 1)
+          }
+        })
+        this.$emit('getValue', this.resultValue)
+      } else {
+        // 单选
+        this.$emit('getValue', val)
+      }
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueName = this.multiple ? [] : ''
+      this.resultValue = []
+      this.clearSelected()
+      this.$emit('getValue', this.resultValue)
+    },
+    // 清空选中样式
+    clearSelected() {
+      const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element) => element.classList.remove('is-current'))
+    }
+  }
+}
+</script>
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 300px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.el-popper {
+  z-index: 9999;
+}
+.ification_col {
+  width: 20px;
+  height: 10px;
+  display: inline-block;
+}
+</style>
diff --git a/src/views/popup-pre/components/staffBar.vue b/src/views/popup-pre/components/staffBar.vue
new file mode 100644
index 0000000..b924f85
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar.vue
@@ -0,0 +1,137 @@
+<template>
+  <div id="staff-bar" class="container">
+    <ve-bar
+      :style='{"height": height,"width": width}'
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+
+export default {
+  name: 'PowerLine',
+  data() {
+    return {
+      title: {
+        text: '到岗率',
+        textStyle: {
+          color: '#cce9ff',
+          fontSize: 15
+        },
+        padding: [5, 0, 0, 120]
+      },
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { name: '时间' },
+        metrics: [],
+        dimension: ['name']
+      },
+      extend: {
+        grid: {
+          bottom: '0%',
+          top: '1%',
+          containLabel: true
+        },
+        yAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        xAxis: {
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        legend: {
+          show: false,
+          // type: 'scroll',
+          top: '0px',
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          }
+        },
+        series: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#38a0d6cc' }, { offset: 1, color: '#74e3b3cc' }], false),
+          type: 'bar',
+          symbol: 'circle',
+          symbolSize: 8,
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          position: function(pt) {
+            return [pt[0], '10']
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar').clientWidth - 10 + 'px'
+    this.fetchData()
+  },
+  methods: {
+    // 获取数据
+    fetchData() {
+      // statisticsMonth().then(response => {
+      //   if(response.data.length>0){
+      //     const arr = response.data.map((item)=> {
+      //       const result = {name: item.name}
+      //       for (let i = 0; i < item.data.length; i++) {
+      //         result[item.data[i].name] = item.data[i].count
+      //       }
+      //       return result
+      //     })
+      //     const area = response.data[0].data.map(item=>item.name)
+      //     this.chartData.columns = ['name', ...area]
+      //     this.chartSettings.metrics = area
+      //     this.chartSettings.labelMap = {'name':'姓名'}
+      //     this.chartData.rows = arr
+      //   }
+      // })
+      this.chartData.columns = ['name', '到岗率']
+      this.chartSettings.metrics = ['到岗率']
+      this.chartSettings.labelMap = { 'name': '姓名' }
+      // 模拟数据
+      this.chartData.rows = [
+        { name: '保安0', '到岗率': '91' },
+        { name: '保安1', '到岗率': '94' },
+        { name: '保安2', '到岗率': '89' },
+        { name: '保安3', '到岗率': '75' },
+        { name: '保安4', '到岗率': '88' },
+        { name: '保安5', '到岗率': '78' },
+        { name: '保安6', '到岗率': '86' },
+        { name: '保安7', '到岗率': '82' },
+        { name: '保安8', '到岗率': '94' },
+        { name: '保安9', '到岗率': '96' },
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffBar1.vue b/src/views/popup-pre/components/staffBar1.vue
new file mode 100644
index 0000000..c5a7ee0
--- /dev/null
+++ b/src/views/popup-pre/components/staffBar1.vue
@@ -0,0 +1,142 @@
+<template>
+  <div id="staff-bar1" class="container"/>
+</template>
+
+<script>
+import { multiScoreSecurity} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'StaffBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安保到岗评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安保到岗评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('staff-bar1'))
+    this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-bar1').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-bar1').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '安保到岗评分' }
+      multiScoreSecurity().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine.vue b/src/views/popup-pre/components/staffLine.vue
new file mode 100644
index 0000000..64a5e1b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine.vue
@@ -0,0 +1,146 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StaffLine',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { time: '时间' },
+        metrics: [],
+        dimension: ['time']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['一期主楼', '二期主楼', '录制楼']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {},
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['time', '一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.metrics = ['一期主楼', '二期主楼', '录制楼']
+      this.chartSettings.labelMap = { 'time': '时间' }
+      // 模拟数据
+      this.chartData.rows = [
+        { time: '0', '一期主楼': '1345', '二期主楼': '942', '录制楼': '194'},
+        { time: '1', '一期主楼': '1445', '二期主楼': '1012', '录制楼': '294'},
+        { time: '2', '一期主楼': '1545', '二期主楼': '1192', '录制楼': '394'},
+        { time: '3', '一期主楼': '1645', '二期主楼': '1142', '录制楼': '494'},
+        { time: '4', '一期主楼': '1745', '二期主楼': '1072', '录制楼': '594'},
+        { time: '5', '一期主楼': '1645', '二期主楼': '912', '录制楼': '494'},
+        { time: '6', '一期主楼': '1665', '二期主楼': '992', '录制楼': '294'},
+        { time: '7', '一期主楼': '1635', '二期主楼': '942', '录制楼': '494'},
+        { time: '8', '一期主楼': '1595', '二期主楼': '922', '录制楼': '394'},
+        { time: '9', '一期主楼': '1545', '二期主楼': '942', '录制楼': '394'},
+        { time: '10', '一期主楼': '1445', '二期主楼': '900', '录制楼': '234'},
+        { time: '11', '一期主楼': '1345', '二期主楼': '1000', '录制楼': '294'},
+        { time: '12', '一期主楼': '1375', '二期主楼': '800', '录制楼': '394'},
+        { time: '13', '一期主楼': '1325', '二期主楼': '842', '录制楼': '244'},
+        { time: '14', '一期主楼': '1345', '二期主楼': '742', '录制楼': '194'},
+        { time: '15', '一期主楼': '1445', '二期主楼': '642', '录制楼': '184'},
+        { time: '16', '一期主楼': '1345', '二期主楼': '542', '录制楼': '174'},
+        { time: '17', '一期主楼': '1545', '二期主楼': '442', '录制楼': '224'},
+        { time: '18', '一期主楼': '1345', '二期主楼': '542', '录制楼': '194'},
+        { time: '19', '一期主楼': '1245', '二期主楼': '642', '录制楼': '184'},
+        { time: '20', '一期主楼': '1215', '二期主楼': '542', '录制楼': '194'},
+        { time: '21', '一期主楼': '1235', '二期主楼': '442', '录制楼': '164'},
+        { time: '22', '一期主楼': '1195', '二期主楼': '342', '录制楼': '144'},
+        { time: '23', '一期主楼': '1145', '二期主楼': '242', '录制楼': '114'}
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/staffLine1.vue b/src/views/popup-pre/components/staffLine1.vue
new file mode 100644
index 0000000..d3cd04b
--- /dev/null
+++ b/src/views/popup-pre/components/staffLine1.vue
@@ -0,0 +1,143 @@
+<template>
+  <div id="staff-line" class="container">
+    <ve-line
+      v-if="isShow"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"/>
+  </div>
+</template>
+
+<script>
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
+export default {
+  name: 'StaffLine1',
+  data() {
+    return {
+      isShow: true,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '0%',
+          top: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: {
+          type: 'line',
+          // top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
+          label: {
+            show: true,
+            position: 'insideBottom'
+          },
+          symbol: 'circle',
+          symbolSize: 6,
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0.2,
+                color: '#0156b755'
+              },
+              {
+                offset: 0.5,
+                color: 'rgba(10,25,124,0.2)'
+              }
+            ])
+          },
+          emphasis: {
+            focus: 'series'
+          }
+        }
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+    this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('staff-line').clientHeight - 10 + 'px'
+      this.width = document.getElementById('staff-line').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      this.chartData.columns = ['date', 'score']
+      this.chartSettings.metrics = ['score']
+      this.chartSettings.labelMap = { 'date': '时间', 'score': '安防评分' }
+      multiScoreCommute().then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.chartData.rows = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .container{
+    position:relative;
+    width: 100%;
+    height:100%;
+  }
+</style>
+
diff --git a/src/views/popup-pre/components/visitBar.vue b/src/views/popup-pre/components/visitBar.vue
new file mode 100644
index 0000000..1726d20
--- /dev/null
+++ b/src/views/popup-pre/components/visitBar.vue
@@ -0,0 +1,151 @@
+<template>
+  <div id="visit-bar" class="container"/>
+</template>
+
+<script>
+import { multiScoreVisitor} from '@/api/pop';
+import * as echarts from 'echarts';
+
+export default {
+  name: 'AreaBar1',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        // aria: {
+        //   enabled: true,
+        //   decal: {
+        //     show: true
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '2%',
+          bottom: '1%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '访客控制安防评分',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              show: true,
+              position: 'insideTop'
+            },
+            // decal: {
+            //   symbol: 'circle'
+            // },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            }
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('visit-bar'))
+    this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+    const that = this
+    window.addEventListener('resize', function() {
+      that.reload()
+    })
+    this.fetchData()
+
+  },
+
+  methods: {
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('visit-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('visit-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      // this.chartData.columns = ['date', 'score']
+      // this.chartSettings.metrics = ['score']
+      // this.chartSettings.labelMap = { 'date': '时间', 'score': '访客控制安防评分' }
+      multiScoreVisitor().then(response => {
+        if (response.code === 200) {
+          // this.chartData.rows = response.data
+          this.extend.series[0].data = response.data.map(item => item.score)
+          this.extend.xAxis.data = response.data.map(item => item.date)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+</style>
+
diff --git a/src/views/popup-pre/components/visitorPie.vue b/src/views/popup-pre/components/visitorPie.vue
new file mode 100644
index 0000000..ef1a20d
--- /dev/null
+++ b/src/views/popup-pre/components/visitorPie.vue
@@ -0,0 +1,428 @@
+<template>
+  <div>
+    <div class="visitor-pie" id="visitor-pie"/>
+    <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  name: 'VisitorPie',
+  components: {},
+  data() {
+    return {
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      optionData: [{
+        name: '其他事宜',
+        value: 10000,
+        itemStyle: {
+          color: '#22c4ff'
+        }
+      }, {
+        name: '安装维修',
+        value: 12116,
+        itemStyle: {
+          color: '#82ffc7'
+        }
+      }, {
+        name: '商务会议',
+        value: 16616,
+        itemStyle: {
+          color: '#0067f1'
+        }
+      }]
+    }
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      const myChart = echarts.init(document.getElementById('visitor-pie'))
+      this.option = this.getPie3D(this.optionData, 0.8)
+      myChart.setOption(this.option)
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: 'pie2d',
+        type: 'pie',
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        startAngle: -20, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['20%', '50%'],
+        center: ['50%', '50%'],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0
+        }
+      })
+      myChart.setOption(this.option)
+      this.bindListen(myChart)
+    },
+
+    getPie3D(pieData, internalDiameterRatio) {
+      // internalDiameterRatio:透明的空心占比
+      const that = this
+      const series = []
+      let sumValue = 0
+      let startValue = 0
+      let endValue = 0
+      let legendData = []
+      let legendBfb = []
+      const k = 1 - internalDiameterRatio
+      pieData.sort((a, b) => {
+        return (b.value - a.value)
+      })
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value
+        const seriesItem = {
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+          type: 'surface',
+          parametric: true,
+          wireframe: {
+            show: false
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k
+          },
+          center: ['10%', '50%']
+        }
+
+        if (typeof pieData[i].itemStyle !== 'undefined') {
+          const itemStyle = {}
+          typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null
+          typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null
+          seriesItem.itemStyle = itemStyle
+        }
+        series.push(seriesItem)
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      legendData = []
+      legendBfb = []
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value
+        series[i].pieData.startRatio = startValue / sumValue
+        series[i].pieData.endRatio = endValue / sumValue
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
+          false, false, k, series[i].pieData.value)
+        startValue = endValue
+        const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+        legendData.push({
+          name: series[i].name,
+          value: bfb
+        })
+        legendBfb.push({
+          name: series[i].name,
+          value: bfb
+        })
+      }
+      const boxHeight = this.getHeight3D(series, 26)
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      const option = {
+        legend: {
+          data: legendData,
+          orient: 'horizontal',
+          top: 0,
+          itemGap: 10,
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          show: true,
+          icon: 'circle',
+          iconSize: 13
+          // formatter: function(param) {
+          //   const item = legendBfb.filter(item => item.name == param)[0]
+          //   const bfs = that.fomatFloat(item.value * 100, 2) + "%"
+          //   return `${item.name}  ${bfs}`
+          // }
+        },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: '#96cffa'
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          rich: {
+            b: {
+              color: '#cce9ff',
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: '{b|{b} \n}{c|{c}}{b|人}'
+
+        },
+        tooltip: {
+          formatter: params => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                100).toFixed(2)
+              return `${params.seriesName}<br/>` +
+                `<span style="display:inline-blockmargin-right:5pxborder-radius:10pxwidth:10pxheight:10pxbackground-color:${params.color}"></span>` +
+                `${bfb}%`
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, // 圆环的高度
+          viewControl: {
+            alpha: 40,
+            distance: 300,
+            rotateSensitivity: 0,
+            zoomSensitivity: 0,
+            panSensitivity: 0,
+            autoRotate: false
+          }
+        },
+        series: series
+      }
+      return option
+    },
+
+    // 获取3d丙图的最高扇区的高度
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return (b.pieData.value - a.pieData.value)
+      })
+      return height * 25 / series[0].pieData.value
+    },
+
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2
+      const startRadian = startRatio * Math.PI * 2
+      const endRadian = endRatio * Math.PI * 2
+      const midRadian = midRatio * Math.PI * 2
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== 'undefined' ? k : 1 / 3
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(u, v) {
+          if (u < startRadian) {
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        y: function(u, v) {
+          if (u < startRadian) {
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          if (u > endRadian) {
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+        },
+        z: function(u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u)
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+        }
+      }
+    },
+
+    fomatFloat(num, n) {
+      var f = parseFloat(num)
+      if (isNaN(f)) {
+        return false
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+      var s = f.toString()
+      var rs = s.indexOf('.')
+      // 判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length
+        s += '.'
+      }
+      while (s.length <= rs + n) {
+        s += '0'
+      }
+      return s
+    },
+
+    bindListen(myChart) {
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      const that = this
+      let selectedIndex = ''
+      let hoveredIndex = ''
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on('click', function(params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+        const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+        const k = that.option.series[params.seriesIndex].pieStatus.k
+        const startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+        const endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
+            selectedIndex].pieData
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
+            selectedIndex].pieData
+            .value)
+          that.option.series[selectedIndex].pieStatus.selected = false
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+          isSelected,
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value)
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? selectedIndex = params.seriesIndex : null
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on('mouseover', function(params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            k = that.option.series[hoveredIndex].pieStatus.k
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected,
+              isHovered, k, that.option.series[hoveredIndex].pieData.value)
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+            isHovered = true
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+            k = that.option.series[params.seriesIndex].pieStatus.k
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5)
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        }
+      })
+      // 修正取消高亮失败的 bug
+      myChart.on('globalout', function() {
+        // 准备重新渲染扇形所需的参数
+        let isSelected
+        let isHovered
+        let startRatio
+        let endRatio
+        let k
+        if (hoveredIndex !== '') {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected
+          isHovered = false
+          k = that.option.series[hoveredIndex].pieStatus.k
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
+            isSelected,
+            isHovered, k, that.option.series[hoveredIndex].pieData.value)
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = ''
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option)
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+
+.visitor-pie {
+  width: 100%;
+  height: 100%;
+  z-index: 999999;
+}
+.bottom-bg{
+  position: relative;
+  left: 26%;
+  top: -50%;
+  width: 50%;
+  height: 30%;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+}
+</style>
diff --git a/src/views/popup-pre/device.vue b/src/views/popup-pre/device.vue
new file mode 100644
index 0000000..b64186e
--- /dev/null
+++ b/src/views/popup-pre/device.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="device">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div style="height: 48%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">
+        设备详情
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        基本信息
+      </div>
+      <div class="name">
+        设备名称：<span class="value">{{ device.devName }}</span>
+      </div>
+      <div class="name">
+        设备类型：<span class="value">{{ device.devTypeName }}</span>
+      </div>
+      <div class="name">
+        设备状态：
+        <span v-if="device.statusName==='在线'" class="value" style="margin-left:-2px;color: #08f102">{{ device.statusName }}</span>
+        <span v-else-if="device.statusName==='离线'" class="value" style="margin-left:-2px;color: #9b9b9b">{{ device.statusName }}</span>
+        <span v-else class="value" style="margin-left:-2px;color: red">{{ device.statusName }}</span>
+      </div>
+      <div class="name">
+        所在楼栋：<span class="value">{{ device.positionName }}</span>
+      </div>
+      <div class="name">
+        所在楼层：<span class="value">{{ device.areaName }}</span>
+      </div>
+      <div class="name" :style="{height:'55px'}">
+        设备位置：<span class="value">{{ device.detailLocation }}</span>
+      </div>
+    </div>
+    <div id="dev-video" class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">
+        监控视频
+      </div>
+      <iframe id="playHK" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { repostSocket } from '@/api/common'
+import { getDrawNoDevice } from '@/api/pop'
+export default {
+  name: 'Device',
+  data() {
+    return {
+      isShow: true,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      item: require('@/assets/popup/item.png'), // 背景图片
+      device: {
+        area: '',
+        areaName: '',
+        createTime: '',
+        detailLocation: '',
+        devCode: '',
+        devName: '',
+        devType: '',
+        devTypeName: '',
+        id: '',
+        ids: '',
+        indexCode: '',
+        installTime: '',
+        ip: '',
+        isKeyArea: '',
+        isKeyAreaName: '',
+        position: '',
+        positionName: '',
+        remarks: '',
+        sn: '',
+        status: '',
+        statusName: '',
+        updateTime: ''
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+    // const that = this
+    // window.addEventListener('resize', function() {
+    //   that.reload()
+    // })
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  methods: {
+    async initData() {
+      if (this.$route.query && this.$route.query.message) {
+        getDrawNoDevice(this.$route.query.message.slice(7)).then(async response => {
+          if (response.code === 200) {
+            this.device = response.data
+            await this.$nextTick()
+            setTimeout(() => {
+              try {
+                document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+              } catch (e) {
+              } finally {
+                setTimeout(() => {
+                  document.getElementById('playHK').contentWindow.play(this.device.indexCode)
+                }, 1000)
+              }
+            }, 1000)
+          }
+        })
+      }
+    },
+    async reload() {
+      // this.isShow = false
+      await this.$nextTick()
+      document.getElementById('playHK').contentWindow.initPlugin('real', window.screen.availWidth - 500, window.screen.availHeight / 2 - 40)
+      // this.isShow = true
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.iframe-body{
+  height: 90%;
+  width: 100%;
+  frameBorder: 0;
+  scrolling: no;
+  border: 0;
+  vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.device{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 48%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .name{
+    width: 480px;
+    height: 30px;
+    line-height: 25px;
+    color: white;
+    font-weight: bold;
+    padding-left: 15px;
+    margin-top: 5px;
+    margin-left: 10px;
+    padding-top: 2px;
+    font-size: 15px;
+    border-radius: 5px;
+    font-family: 黑体;
+    font-weight: normal;
+    background: linear-gradient(to left, #efc58733, #39a0d333);
+    //border-left: 5px solid #219cfa;
+    // border-bottom: 5px solid linear-gradient(to left, #efc58733, #39a0d333);
+  }
+  .value{
+    margin-left: 5px;
+    color: white;
+    font-weight: bold;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top:5px;
+    color:white;
+    background: #fc2323cc;
+    width: 25px;
+    height:25px;
+    border-radius: 5px;
+    padding: 3px;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/floor.vue b/src/views/popup-pre/floor.vue
new file mode 100644
index 0000000..6342d5a
--- /dev/null
+++ b/src/views/popup-pre/floor.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="floor">
+    <svg-icon icon-class="pop-cross" class="close" @click="changePage"/>
+    <div class="block" style="height: 30%">
+      <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div>
+      <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;">
+         <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%">
+        <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div>
+        </div>
+      </div>
+      <div style="width: 50%;display: flex;padding: 0px 10%;">
+        <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" />
+        <div class="item">
+          <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div>
+          <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div>
+        </div>
+      </div>
+    </div>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div>
+      <floor-pie ref="floorPieDiv" style="flex:1;"/>
+    </div>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div>
+      <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/>
+    </div>
+    <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/>
+  </div>
+</template>
+
+<script>
+import FloorPie from '@/views/popup/components/floorPie';
+import { repostSocket } from '@/api/common'
+import { getAreaScore } from '@/api/pop'
+export default {
+  name: 'Floor',
+  components: { FloorPie },
+  data() {
+    return {
+      isbig: false,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      building: '一期主楼', // 楼名称
+      floor: '10F', // 楼层
+      camera: 0, // 摄像机
+      score: '*', // 分数
+      door: 0, // 闸机
+      area: ''
+    }
+  },
+  watch: {
+    $route(val) {
+      this.initData()
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      if (this.$route.query && this.$route.query.message) {
+        const arr = this.$route.query.message.split('=')
+        this.building = arr[1]
+        this.floor = this.$route.query.floor
+        this.camera = this.$route.query.camera
+        this.door = this.$route.query.door
+        this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png')
+        let position
+        switch (this.building) {
+          case '一期主楼':
+            position = 1
+            break
+          case '二期主楼':
+            position = 2
+            break
+          case '录制楼':
+            position = 3
+            break
+          case '1600演播厅':
+            position = 4
+            break
+        }
+        const params = {
+          position: position,
+          area: this.floor.replace('F', '')
+        }
+        getAreaScore(params).then(response => {
+          if (response.code === 200) {
+            this.score = response.data['安防评分']
+          }
+        })
+        this.$refs.floorPieDiv.initData(params)
+      }
+    },
+    changePage() {
+      const params = {
+        type: 'menu',
+        message: 'show'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.floor{
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  width: 500px;
+  height: 100%;
+  margin-left: 10px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  .block{
+    height: 35%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .close{
+    position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px;
+    padding: 3px;
+  }
+  .floor-big-pic{
+    position: fixed;
+    bottom: calc( 50% - 200px);
+    left: calc( 50% - 300px);
+    height: 400px;
+    height: 600px;
+    z-index: 999999999;
+  }
+}
+</style>
diff --git a/src/views/popup-pre/left.vue b/src/views/popup-pre/left.vue
new file mode 100644
index 0000000..2a96d7a
--- /dev/null
+++ b/src/views/popup-pre/left.vue
@@ -0,0 +1,177 @@
+<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>
+      <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>
+    <el-tooltip
+      effect="dark"
+      content="测试测试测试测试测试测试测试测试"
+      placement="right"
+      :popper-options="{strategy:'fixed'}"
+    >
+      <div class="block" style="flex-direction: column;">
+        <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
+        <staff-line1 style="flex:1;"/>
+      </div>
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
+      <area-bar1 style="flex: 1;height: calc(100% - 40px)"/>
+    </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'
+export default {
+  name: 'Left',
+  components: { AreaBar1, StaffLine1 },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      list: {
+        '0': '*',
+        '1': '*',
+        '2': '*',
+        '3': '*',
+        '4': '*',
+        '5': '*'
+      }
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.initData()
+    }, 60000)
+    this.initData()
+  },
+  methods: {
+    initData() {
+      getPeopleNumber().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]
+        }
+      })
+      getTodayNumber().then(response => {
+        if (response.code === 200) {
+          this.list['2'] = response.data['今日访客量']
+        }
+      })
+      // 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['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.left{
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 45px;
+    height: 40px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 33%;
+    font-weight: bold;
+    text-align: center;
+    font-size: 15px;
+    .num{
+      text-shadow: 0 0 5px #ffb441;
+      color: #ffb441;
+      font-size: 18px;
+      padding-top: 2px;
+    }
+    .unit{
+      color: #B3F3F6;
+      font-size: 13px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/right.vue b/src/views/popup-pre/right.vue
new file mode 100644
index 0000000..9f42a29
--- /dev/null
+++ b/src/views/popup-pre/right.vue
@@ -0,0 +1,321 @@
+<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>
+        </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="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;height: calc(100% - 40px)"/>
+<!--      <power-line1 style="flex:1;"/>-->
+    </div>
+  </div>
+</template>
+
+<script>
+
+// 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: { PersonTable },
+  data() {
+    return {
+      timer: null,
+      titleImg: require('@/assets/popup/title.png'), // 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      line: require('@/assets/popup/line.png'), // 背景图片
+      ball: require('@/assets/popup/ball.png'), // 背景图片
+      bottom: require('@/assets/popup/bottom.png'), // 背景图片
+      list: {
+        '1': '*',
+        '2': '*',
+        '3': '*'
+      },
+      safeData: [],
+      num: '*'
+    }
+  },
+  mounted() {
+    clearInterval(this.timer)
+    this.initData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    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:  Math.max(...that.safeData.map(item0 => item0.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['一期主楼'].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']
+      //   }
+      // })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  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);
+    margin: 10px;
+  }
+  .title{
+    text-shadow: 0 0 5px #d1ffff;
+    width: 500px;
+    height: 35px;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    color: white;
+    font-weight: bold;
+    padding-top: 8px;
+    padding-left: 30px;
+    font-family: 黑体;
+    letter-spacing: 1px;
+  }
+  .base-map-image{
+    width: 60px;
+    height: 60px;
+  }
+  .area-map-image{
+    margin-right: 10px;
+    margin-left: 5px;
+    width: 100%;
+    height: 80%;
+  }
+  .item{
+    width: 50%;
+    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;
+  }
+  .case-bg{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%;
+    display: unset;
+    .ball-bg{
+      position: relative;
+      left: 20%;
+      width: 60%;
+      height: 100%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .bottom-bg{
+      position: relative;
+      left: 2%;
+      top: 50%;
+      width: 100%;
+      height: 30%;
+      background-repeat: no-repeat;
+      -webkit-background-size: 100% 100%;
+      background-size: 100% 100%;
+    }
+    .case-text{
+      font-weight: bold;
+      position: relative;
+      text-align: center;
+      left: 0%;
+      top: 45%;
+      width: 100%;
+      height: 30px;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup-pre/top.vue b/src/views/popup-pre/top.vue
new file mode 100644
index 0000000..7850d83
--- /dev/null
+++ b/src/views/popup-pre/top.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="top-container" >
+    <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
+    <div class="title">安防综合管理平台</div>
+    <clock class="clock"/>
+    <div class="sys">
+      <svg-icon icon-class="next-circle"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Clock';
+export default {
+  name: 'Top',
+  components: { Clock },
+  data() {
+    return {
+      top: require('@/assets/popup/top.png')
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.top-container{
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(5, 30, 61, 0.53),rgba(5, 30, 61, 0.53), #0D3F7E00);
+  overflow: hidden;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
+.top{
+  width: 100%;
+  height: 200%;
+  margin-top: -40px;
+  background-repeat: no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.title{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  color: white;
+  font-weight: bold;
+  font-family: 黑体;
+  font-size: 28px;
+  width: 100%;
+  margin-top: 2px;
+  text-align: center;
+  letter-spacing: 5px;
+  overflow: hidden;
+}
+.clock{
+  position: absolute;
+  top:5px;
+  left:30px;
+}
+.sys{
+  position: absolute;
+  width: 215px;
+  height: 30px;
+  top:5px;
+  right:0px;
+  color: #d1ffff;
+  font-weight: bold;
+  font-family: 黑体;
+  letter-spacing: 2px;
+  font-size: 18px;
+  text-shadow: 0 0 5px #d1ffff;
+}
+</style>
diff --git a/src/views/popup/components/camBar.vue b/src/views/popup/components/camBar.vue
new file mode 100644
index 0000000..ef0d000
--- /dev/null
+++ b/src/views/popup/components/camBar.vue
@@ -0,0 +1,181 @@
+<template>
+  <div id="cam-bar" class="container"/>
+</template>
+
+<script>
+
+import * as echarts from 'echarts';
+import { cameraTypeStatistics } from '@/api/pop'
+var myChart
+export default {
+  name: 'CamBar',
+  data() {
+    return {
+      timer: null,
+      height: '0',
+      extend: {
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 5
+          },
+          data: ['在线数量', '总数量'],
+          orient: 'vertical',
+          right: 10,
+          top: 10
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            label: {
+              backgroundColor: '#82b4dc'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+        },
+        yAxis: {
+          position: 'left',
+          type: 'value',
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          }
+        },
+        series: [
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '在线数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(195,250,235,0.8)' },
+                { offset: 0.3, color: 'rgba(46,253,0,0.8)' },
+                { offset: 0, color: 'rgba(12,178,0,0.8)' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(46,253,0,0.8)' },
+                  { offset: 0.7, color: 'rgba(12,178,0,0.8)' },
+                  { offset: 1, color: 'rgba(195,250,235,0.8)' }
+                ])
+              }
+            },
+            data: []
+          },
+          {
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'top',
+              distance: 5
+            },
+            name: '总数量',
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(250,224,198,0.8)' },
+                { offset: 0.3, color: '#ff9913cc' },
+                { offset: 0, color: '#FFB005CC' }
+              ])
+            },
+            emphasis: {
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff9913cc' },
+                  { offset: 0.7, color: '#FFB005CC' },
+                  { offset: 1, color: 'rgba(250,224,198,0.8)' }
+                ])
+              }
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    myChart = echarts.init(document.getElementById('cam-bar'))
+    // const that = this
+    // this.timer = setInterval(function() {
+    //   // 每次向后滚动一个，最后一个从头开始。
+    //   if (that.extend.dataZoom[0].endValue === 23) {
+    //     that.extend.dataZoom[0].endValue = 4
+    //     that.extend.dataZoom[0].startValue = 0
+    //   } else {
+    //     that.extend.dataZoom[0].endValue = that.extend.dataZoom[0].endValue + 1
+    //     that.extend.dataZoom[0].startValue = that.extend.dataZoom[0].startValue + 1
+    //   }
+    //   myChart.setOption(that.extend, true)
+    // }, 2000)
+    this.fetchData()
+    window.addEventListener('resize', function() {
+      myChart.resize()
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    fetchData() {
+      cameraTypeStatistics().then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.online)
+          this.extend.series[1].data = response.data.map(item => item.all)
+          this.extend.xAxis.data = response.data.map(item => item.name.replace('摄像头', ''))
+          console.log(this.extend)
+          console.log('wxt')
+          myChart.clear()
+          myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 200px;
+}
+</style>
+
diff --git a/src/views/popup/components/caseBar.vue b/src/views/popup/components/caseBar.vue
new file mode 100644
index 0000000..421cef1
--- /dev/null
+++ b/src/views/popup/components/caseBar.vue
@@ -0,0 +1,201 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <div id="case-bar" class="container"/>
+    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">
+      <el-tab-pane label="近7天" name="week"/>
+      <el-tab-pane label="近1月" name="month"/>
+      <el-tab-pane label="近3月" name="3month"/>
+      <el-tab-pane label="近1年" name="year"/>
+    </el-tabs>
+<!--    <div style="display: flex;position:absolute;right: 10px;top:6px">-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('week')">近7天</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('month')">近1月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('3month')">近3月</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeTime('year')">近1年</el-button>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+import { casePieStatistics } from '@/api/pop'
+import * as echarts from 'echarts'
+import { getDayTime } from '@/utils/dateutils'
+export default {
+  name: 'CaseBar',
+  data() {
+    return {
+      isShow: true,
+      myChart: null,
+      height: '0',
+      width: '0',
+      timeRange: [],
+      chartSettings: {
+        labelMap: { date: '时间' },
+        metrics: [],
+        dimension: ['date']
+      },
+      activeName: 'week',
+      listQuery: {
+        startTime: '',
+        endTime: ''
+      },
+      extend: {
+        color: ['#0071ff88', '#00afff88', '#00fdc088'],
+        legend: {
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold'
+          },
+          lineStyle: {
+            width: 10
+          },
+          data: ['访客控制安防评分']
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#cce9ff'
+            }
+          }
+        },
+        grid: {
+          left: '1%',
+          right: '5%',
+          bottom: '1%',
+          top: '2%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'category',
+          position: 'left',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          },
+          data: ['离岗', '黑名单', '监控点离线']
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: '#cce9ff'
+            }
+          },
+          axisLabel: {
+            color: '#cce9ff'
+          }
+        },
+        series: [
+          {
+            name: '安防事件频率',
+            type: 'bar',
+            barMaxWidth: 30,
+            label: {
+              color: '#cce9ff',
+              show: true,
+              align: 'center',
+              verticalAlign: 'middle',
+              position: 'right',
+              distance: 10
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 1, color: 'rgba(255,190,68,0.4)' },
+                // { offset: 0.3, color: 'rgba(0,253,232,0.8)' },
+                { offset: 0, color: '#82b4dc' }
+              ])
+            },
+            data: [0, 2, 20]
+          }
+        ]
+      },
+      chartData: {
+        columns: [],
+        rows: []
+      }
+    }
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById('case-bar'))
+    this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+    this.listQuery.endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
+    this.changeTime('week')
+    const that = this
+    window.addEventListener('resize', function() {
+      that.myChart.resize()
+    })
+  },
+  methods: {
+    changeTime() {
+      let startTime
+      switch (this.activeName) {
+        case 'year':
+          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'halfyear':
+          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case '3month':
+          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
+          break
+        case 'month':
+          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+        case 'week':
+          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
+          this.listQuery.startTime = startTime.Format('yyyy-MM-dd hh:mm:ss')
+          break
+      }
+      const endTime = new Date()
+      this.listQuery.endTime = endTime.Format('yyyy-MM-dd hh:mm:ss')
+      this.fetchData()
+      this.myChart.setOption(this.extend, true)
+    },
+    async reload() {
+      this.isShow = false
+      await this.$nextTick()
+      this.height = document.getElementById('case-bar').clientHeight - 10 + 'px'
+      this.width = document.getElementById('case-bar').clientWidth - 10 + 'px'
+      this.isShow = true
+    },
+    // 获取数据
+    fetchData() {
+      casePieStatistics(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.extend.series[0].data = response.data.map(item => item.value)
+          this.extend.yAxis.data = response.data.map(item => item.name)
+          this.myChart.setOption(this.extend, true)
+        }
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+  height: 20px !important;
+  line-height: 20px !important;
+}
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 6px;
+}
+</style>
+
diff --git a/src/views/popup/components/casePie.vue b/src/views/popup/components/casePie.vue
new file mode 100644
index 0000000..685c801
--- /dev/null
+++ b/src/views/popup/components/casePie.vue
@@ -0,0 +1,164 @@
+<!--suppress ALL -->
+<template>
+  <div id="case-pie" class="container">
+    <ve-ring
+      :style='{"height": height,"width": width}'
+      style="margin-top: 10px"
+      :width='width'
+      :height='height'
+      :judge-width="true"
+      :data="chartData"
+      :extend="extend"
+      :settings="chartSettings"
+    />
+  </div>
+</template>
+
+<script>
+import {casePieStatistics, deviceStatus, statisticsBuilding} from '@/api/pop'
+import { getDoorAreaTree } from '@/api/system/area'
+import {white} from "chalk";
+export default {
+  name: 'CasePie',
+  data() {
+    return {
+      height: '0',
+      width: '0',
+      total: '',
+      chartData: {
+        columns: ['name', 'value'],
+        rows: [
+          {name: '离岗',value: 0 },
+          {name: '黑名单',value: 2 },
+          {name: '监控点离线',value: 20 }
+        ]
+      },
+      extend: {
+        grid: {
+          right: '30%'
+        },
+        color: ['#6BCCFF','#4AFFF7','#BAE7FF'],
+        legend: {
+          orient: "vertical",
+          top: 'center',
+          right: 0,
+          textStyle:{
+            color: white,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#B3F3F6',
+            borderWidth: 1,
+            borderType: 'dotted'
+          },
+        },
+        series: {
+          type: 'pie',
+          radius: ['0%', '70%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            color: '#ff9933',
+            fontSize: 14,
+            fontWeight: 'bold',
+            position: 'outside',
+            formatter: '{name|{b}}\n{value|{c}}',
+            distanceToLabelLine: 2,
+            rich: {}
+          },
+          itemStyle: {
+            borderRadius: 5,
+            borderColor: '#B3F3F6',
+            borderWidth: 2,
+            borderType: 'dotted'
+          }
+        },
+        tooltip: { trigger: 'item', formatter: '{b}<br/>事件数量：{c}<br/>占比：{d}%' }
+      },
+      title: {
+        text: ''
+      },
+      chartSettings: {
+        label: {
+          formatter: params => {
+            return `${params.data.name}:${params.data.value}`
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.height = document.getElementById('case-pie').clientHeight - 10 + 'px'
+    this.width = document.getElementById('case-pie').clientWidth - 10 + 'px'
+    this.search()
+  },
+  methods: {
+    search(){
+      const today = new Date();
+      const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+      casePieStatistics({
+        startTime: day + ' 00:00:00',
+        endTime: day + ' 23:59:59',
+      }).then(response => {
+        if (response.code === 200) {
+          this.chartData.rows = response.data.map(item => {
+            item.name.replace('事件', '')
+            return item
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  position:relative;
+  width: 100%;
+  height:100%;
+  .round{
+    position: absolute;
+    //z-index: 999999;
+    left: 39%;
+    top: 37.5%;
+    width: 20%;
+    height: 39.5%;
+  }
+}
+.circle {
+  position: absolute;
+  top:76px;
+  left:107px;
+  width: 87px;
+  height: 87px;
+  border-radius: 50%;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  text-align: center;
+  margin: 0 auto;
+
+  h2 {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    z-index: 999;
+    transform: translateX(-50%);
+  }
+}
+
+.circle::after {  //小的圆
+  content: '';
+  width: 87px;
+  height: 87px;
+  background-image: radial-gradient(#48617c99, #619bd499);
+  //background: linear-gradient(to top left, #48617c99, #619bd499);
+  position: absolute;  //通过定位来实现两个圆心在同一位置
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+</style>
diff --git a/src/views/popup/components/inoutList.vue b/src/views/popup/components/inoutList.vue
new file mode 100644
index 0000000..3bb0c24
--- /dev/null
+++ b/src/views/popup/components/inoutList.vue
@@ -0,0 +1,300 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <el-tabs v-model="activeName" @tab-click="changeBuilding" style="margin: 0 20px">
+      <el-tab-pane label="全 部 " name="全部"/>
+      <el-tab-pane label="一期主楼" name="一期主楼"/>
+      <el-tab-pane label="录制楼" name="录制楼"/>
+      <el-tab-pane label="二期主楼" name="二期主楼"/>
+    </el-tabs>
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('一期主楼')" style="margin-left: 3px">一期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('录制楼')">录制楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('二期主楼')">二期主楼</el-button>-->
+<!--      <el-button class="casebar-btn" type="primary" plain @click="changeBuilding('')">全 部</el-button>-->
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">员工姓名</div>
+          <div class="tr3 th_style">卡号</div>
+          <div class="tr2 th_style">门禁区域</div>
+          <div class="tr1 th_style">进/出</div>
+          <div class="tr1 th_style">通过方式</div>
+          <div class="tr2 th_style" style="width: 20%">通过时间</div>
+          <div class="tr5 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="table_tr" :key="index">
+              <div class="tr1 tr">{{item.staffName}}</div>
+              <div class="tr3 tr">{{item.cardNum}}</div>
+              <div class="tr2 tr">{{item.doorArea}}</div>
+              <div class="tr1 tr">{{item.inoutTypeName}}</div>
+              <div class="tr1 tr">{{item.passWayName}}</div>
+              <div class="tr2 tr" style="width: 20%">{{item.passTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.picture ? `${item.picture}`: defaultPhoto">
+              </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 { getInoutListPage } from '@/api/person'
+export default {
+  name: 'InoutList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 7, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      activeName: '全部',
+      listQuery: {
+        staffKeywords: '',
+        doorKeywords: '',
+        inoutType: '',
+        passWay: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 7
+      }, // 筛选条件
+      columns: [
+        {
+          text: '员工姓名',
+          value: 'staffName',
+          align: 'center'
+        },
+        {
+          text: '卡号',
+          value: 'cardNum',
+          align: 'center'
+        },
+        {
+          text: '门禁区域',
+          value: 'doorArea',
+          align: 'center'
+        },
+        {
+          text: '进/出',
+          value: 'inoutTypeName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过方式',
+          value: 'passWayName',
+          width: 80,
+          align: 'center'
+        },
+        {
+          text: '通过时间',
+          value: 'passTime',
+          align: 'center'
+        }
+      ], // 显示列
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    const today = new Date()
+    const day = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
+    this.listQuery.startTime = day + ' 00:00:00'
+    this.listQuery.endTime = day + ' 23:59:59'
+    this.fetchData()
+  },
+  methods: {
+    changeBuilding() {
+      this.listQuery.doorKeywords = this.activeName
+      if (this.listQuery.doorKeywords === '全部') {
+        this.listQuery.doorKeywords = ''
+      }
+      this.fetchData(false)
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getInoutListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    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>
+::v-deep(.el-tabs__item){
+  color: #b8dffd !important;
+}
+.casebar-btn {
+  height: 30px;
+  padding-top: 8px;
+  margin-top: 5px;
+}
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 15px;
+}
+.tr {
+  text-overflow: ellipsis;
+  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%;
+}
+.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: 300px;
+  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: 40px;
+  line-height: 40px;
+  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/inoutTable.vue b/src/views/popup/components/inoutTable.vue
new file mode 100644
index 0000000..57e46ae
--- /dev/null
+++ b/src/views/popup/components/inoutTable.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">危险级别</div>
+          <div class="tr2 th_style">事件描述</div>
+          <div class="tr1 th_style">事件状态</div>
+          <div class="tr2 th_style">事件类别</div>
+          <div class="tr4 th_style">发生时间</div>
+          <div class="tr5 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="table_tr" :key="index">
+              <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>
+              <div class="tr4 tr">{{item.happenTime}}</div>
+              <div class="tr5 tr">
+                <img :src="item.eventPicture ? `${item.eventPicture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.eventPicture ? `${item.eventPicture}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+
+export default {
+  name: 'InoutTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+    }
+  },
+
+  // 如果没有父元素传值，将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: {
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      getCaseListPage({
+        offset: 1,
+        limit: 5
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableActionFun()
+        }
+      })
+    }
+  },
+  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: '-'
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 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: 155px;
+  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: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.hard-state{
+  background:red;
+}
+.medium-state{
+  background: #ea9700;
+}
+.low-state{
+  background: #646464;
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+.bottom-big-pic{
+  position: fixed;
+  bottom: 10px;
+  left: calc( 50% - 380px);
+  height: 220px;
+  z-index: 999999999;
+}
+</style>
diff --git a/src/views/popup/components/visitList.vue b/src/views/popup/components/visitList.vue
new file mode 100644
index 0000000..ef3232e
--- /dev/null
+++ b/src/views/popup/components/visitList.vue
@@ -0,0 +1,175 @@
+<template>
+  <div style="width: 500px;height: 100%">
+    <normal-table
+      class="pop-table"
+      style="margin: -5px 0"
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :color-row="colorRow"
+      :tools-option="tableOption.toolsOption"
+      size="mini"
+      :page-sizes="[5]"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="访客照片" align="center" width="120">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.picUri ? `${scope.row.picUri}`: defaultPhoto" :preview-src-list="srcList" width="50" height="50" style="width: 50px; height: 50px;margin-top: 10px" @error="errorImg"/>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </div>
+</template>
+
+<script>
+import NormalTable from '@/components/NormalTable'
+import { getVisitListPage } from '@/api/visitor'
+
+export default {
+  name: 'VisitList',
+  components: { NormalTable },
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      srcList: [],
+      listQuery: {
+        keywords: '',
+        visitReason: '',
+        position: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 5
+      }, // 筛选条件
+      columns: [
+        {
+          text: '访客姓名',
+          value: 'visitorName',
+          align: 'center'
+        },
+        {
+          text: '进入时间',
+          value: 'inTime',
+          align: 'center'
+        },
+        {
+          text: '访问区域',
+          value: 'visitPosition',
+          align: 'center'
+        },
+        {
+          text: '离开时间',
+          value: 'outTime',
+          align: 'center'
+        },
+        {
+          text: '累计访问次数(次)',
+          value: 'frequency',
+          align: 'center'
+        }
+      ], // 显示列
+      dialogFormVisible: false, // 是否显示编辑框
+      dialogFormVisible1: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      reasonList: [],
+      areaList: [],
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    trail(row) {
+      this.dialogFormVisible1 = true
+      this.$refs.trailDialog.initDialog(row.picUri, row.visitorName)
+    },
+    encrypIdCardNo(idCard) {
+      if (idCard.length > 6) {
+        return idCard.substr(0, 6) + '********' + idCard.substr(14)
+      } else if (idCard) {
+        return idCard
+      } else {
+        return ''
+      }
+    },
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getVisitListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.list = response.data.rows.map(item => {
+            item.IDcardm = this.encrypIdCardNo(item.idCard)
+            return item
+          })
+          this.srcList = response.data.rows.map(item => item.picUri)
+          this.total = parseInt(response.data.total)
+          this.listLoading = false
+        }
+      })
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    clearInput() {
+      this.listQuery = {
+        keywords: '',
+        visitReason: '',
+        area: '',
+        startTime: '',
+        endTime: '',
+        offset: 1,
+        limit: 10
+      }
+      this.timeRange = []
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pop-table{
+  ::v-deep {
+    .el-table .el-table__expanded-cell {
+      background: #0D3F7E9D !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/popup/components/visitorTable.vue b/src/views/popup/components/visitorTable.vue
new file mode 100644
index 0000000..d43c014
--- /dev/null
+++ b/src/views/popup/components/visitorTable.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="flowTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr1 th_style">访客姓名</div>
+          <div class="tr2 th_style">进入时间</div>
+          <div class="tr1 th_style">访问区域</div>
+          <div class="tr2 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="table_tr" :class="checkCell(item,index)" :key="index">
+              <div class="tr1 tr">{{item.visitorName}}</div>
+              <div class="tr2 tr">{{item.inTime}}</div>
+              <div class="tr1 tr">{{item.visitPosition}}</div>
+              <div class="tr2 tr">{{item.outTime}}</div>
+              <div class="tr4 tr">{{item.frequency}}</div>
+              <div class="tr4 tr">
+                <img :src="item.picUri ? `${item.picUri}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg" @click="isbig=true;picurl=item.picUri ? `${item.picUri}`: defaultPhoto">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-image class="bottom-big-pic-visitor" :src="picurl" v-if="isbig" @error="errorImg" @click="isbig=false"/>
+  </div>
+</template>
+<script>
+
+import { getCaseListPage } from '@/api/case'
+import { repostSocket } from '@/api/common'
+import {getVisitListPage} from '@/api/visitor'
+import {getDayTime} from '@/utils/dateutils'
+
+export default {
+  name: 'VisitorTable',
+  components: {},
+  data() {
+    return {
+      picurl: '',
+      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      isbig: false,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      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: {
+    checkCell(val, index) {
+      if (index % 2 === 1) {
+        return 'table_tr1'
+      }
+      return ''
+    },
+    fetchData() {
+      this.picurl = ''
+      this.isbig = false
+      const today = getDayTime(new Date().getTime()).Format('yyyy-MM-dd')
+      const tomorrow = getDayTime(new Date().getTime() + 24 * 1 * 60 * 60 * 1000).Format('yyyy-MM-dd')
+      getVisitListPage({
+        keywords: '',
+        visitReason: '',
+        position: '',
+        startTime: today,
+        endTime: tomorrow,
+        offset: 1,
+        limit: 200
+      }).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableActionFun()
+        }
+      })
+    },
+    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)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flowTable {
+  width: 100%;
+  height: 150px;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 15px;
+}
+.tr {
+  text-overflow: ellipsis;
+  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%;
+}
+.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: calc(40vh - 140px);
+  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: 40px;
+  line-height: 40px;
+  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);
+}
+.bottom-big-pic-visitor{
+  position: fixed;
+  bottom: 10px;
+  right: 110px;
+  height: 220px;
+  z-index: 999999999;
+}
+</style>