diff --git a/src/api/person.js b/src/api/person.js
index 62f301f..8a79c27 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -2,7 +2,9 @@
  * 员工管理接口
  */
 import request from '@/utils/request'
-
+import axios from 'axios'
+const { CancelToken } = axios
+let cancel = null
 export function getAttendanceListPage(params) {
   return request({
     url: 'attendanceInfo/listPage',
@@ -134,11 +136,14 @@
 }
 
 // 人员下拉列表
-export function userList(data) {
+export function userList(data, that) {
   return request({
-    // url: `propertyManage/person/list?keywords=${data}`,
     url: `propertyManage/person/list`,
     method: 'post',
-    data
+    data,
+    cancelToken: new CancelToken(cancelFn => {
+      cancel && cancel()
+      cancel = cancelFn
+    })
   })
 }

diff --git a/src/api/person.js b/src/api/person.js
index 62f301f..8a79c27 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -2,7 +2,9 @@
  * 员工管理接口
  */
 import request from '@/utils/request'
-
+import axios from 'axios'
+const { CancelToken } = axios
+let cancel = null
 export function getAttendanceListPage(params) {
   return request({
     url: 'attendanceInfo/listPage',
@@ -134,11 +136,14 @@
 }
 
 // 人员下拉列表
-export function userList(data) {
+export function userList(data, that) {
   return request({
-    // url: `propertyManage/person/list?keywords=${data}`,
     url: `propertyManage/person/list`,
     method: 'post',
-    data
+    data,
+    cancelToken: new CancelToken(cancelFn => {
+      cancel && cancel()
+      cancel = cancelFn
+    })
   })
 }
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index 1554578..d7a6cec 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -20,6 +20,7 @@
         highlight-current
         accordion
         @node-click="onClickNode"
+        :show-checkbox="multiple"
       />
     </el-scrollbar>
     <el-input
@@ -46,6 +47,11 @@
     event: 'selected'
   },
   props: {
+    // 是否显示多选框
+    multiple: {
+      type: Boolean,
+      defaut: false
+    },
     // 输入框尺寸
     inputSize: {
       type: String,

diff --git a/src/api/person.js b/src/api/person.js
index 62f301f..8a79c27 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -2,7 +2,9 @@
  * 员工管理接口
  */
 import request from '@/utils/request'
-
+import axios from 'axios'
+const { CancelToken } = axios
+let cancel = null
 export function getAttendanceListPage(params) {
   return request({
     url: 'attendanceInfo/listPage',
@@ -134,11 +136,14 @@
 }
 
 // 人员下拉列表
-export function userList(data) {
+export function userList(data, that) {
   return request({
-    // url: `propertyManage/person/list?keywords=${data}`,
     url: `propertyManage/person/list`,
     method: 'post',
-    data
+    data,
+    cancelToken: new CancelToken(cancelFn => {
+      cancel && cancel()
+      cancel = cancelFn
+    })
   })
 }
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index 1554578..d7a6cec 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -20,6 +20,7 @@
         highlight-current
         accordion
         @node-click="onClickNode"
+        :show-checkbox="multiple"
       />
     </el-scrollbar>
     <el-input
@@ -46,6 +47,11 @@
     event: 'selected'
   },
   props: {
+    // 是否显示多选框
+    multiple: {
+      type: Boolean,
+      defaut: false
+    },
     // 输入框尺寸
     inputSize: {
       type: String,
diff --git a/src/permission.js b/src/permission.js
index b8dc7ed..2d3b483 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -9,7 +9,7 @@
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom'] // 不重定向白名单
+const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom', '/board'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条

diff --git a/src/api/person.js b/src/api/person.js
index 62f301f..8a79c27 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -2,7 +2,9 @@
  * 员工管理接口
  */
 import request from '@/utils/request'
-
+import axios from 'axios'
+const { CancelToken } = axios
+let cancel = null
 export function getAttendanceListPage(params) {
   return request({
     url: 'attendanceInfo/listPage',
@@ -134,11 +136,14 @@
 }
 
 // 人员下拉列表
-export function userList(data) {
+export function userList(data, that) {
   return request({
-    // url: `propertyManage/person/list?keywords=${data}`,
     url: `propertyManage/person/list`,
     method: 'post',
-    data
+    data,
+    cancelToken: new CancelToken(cancelFn => {
+      cancel && cancel()
+      cancel = cancelFn
+    })
   })
 }
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index 1554578..d7a6cec 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -20,6 +20,7 @@
         highlight-current
         accordion
         @node-click="onClickNode"
+        :show-checkbox="multiple"
       />
     </el-scrollbar>
     <el-input
@@ -46,6 +47,11 @@
     event: 'selected'
   },
   props: {
+    // 是否显示多选框
+    multiple: {
+      type: Boolean,
+      defaut: false
+    },
     // 输入框尺寸
     inputSize: {
       type: String,
diff --git a/src/permission.js b/src/permission.js
index b8dc7ed..2d3b483 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -9,7 +9,7 @@
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom'] // 不重定向白名单
+const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom', '/board'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条
diff --git a/src/router/index.js b/src/router/index.js
index dbbc1a1..6c81d9b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,8 +44,7 @@
   { path: '/right', component: () => import('@/views/popup/right'), hidden: true },
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
-  { path: '/board', component: () => import('@/views/common/board'), hidden: true },
-
+  { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
@@ -86,5 +85,5 @@
 export const asyncRouterMap = [
   ...menuRouters,
   ...systemRouters,
-  { path: '*', redirect: '/404', hidden: true }
+  { path: '*', redirect: '/404', hidden: true },
 ]

diff --git a/src/api/person.js b/src/api/person.js
index 62f301f..8a79c27 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -2,7 +2,9 @@
  * 员工管理接口
  */
 import request from '@/utils/request'
-
+import axios from 'axios'
+const { CancelToken } = axios
+let cancel = null
 export function getAttendanceListPage(params) {
   return request({
     url: 'attendanceInfo/listPage',
@@ -134,11 +136,14 @@
 }
 
 // 人员下拉列表
-export function userList(data) {
+export function userList(data, that) {
   return request({
-    // url: `propertyManage/person/list?keywords=${data}`,
     url: `propertyManage/person/list`,
     method: 'post',
-    data
+    data,
+    cancelToken: new CancelToken(cancelFn => {
+      cancel && cancel()
+      cancel = cancelFn
+    })
   })
 }
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index 1554578..d7a6cec 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -20,6 +20,7 @@
         highlight-current
         accordion
         @node-click="onClickNode"
+        :show-checkbox="multiple"
       />
     </el-scrollbar>
     <el-input
@@ -46,6 +47,11 @@
     event: 'selected'
   },
   props: {
+    // 是否显示多选框
+    multiple: {
+      type: Boolean,
+      defaut: false
+    },
     // 输入框尺寸
     inputSize: {
       type: String,
diff --git a/src/permission.js b/src/permission.js
index b8dc7ed..2d3b483 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -9,7 +9,7 @@
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom'] // 不重定向白名单
+const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom', '/board'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条
diff --git a/src/router/index.js b/src/router/index.js
index dbbc1a1..6c81d9b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,8 +44,7 @@
   { path: '/right', component: () => import('@/views/popup/right'), hidden: true },
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
-  { path: '/board', component: () => import('@/views/common/board'), hidden: true },
-
+  { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
@@ -86,5 +85,5 @@
 export const asyncRouterMap = [
   ...menuRouters,
   ...systemRouters,
-  { path: '*', redirect: '/404', hidden: true }
+  { path: '*', redirect: '/404', hidden: true },
 ]
diff --git a/src/views/common/board.vue b/src/views/common/board.vue
deleted file mode 100644
index 43416ea..0000000
--- a/src/views/common/board.vue
+++ /dev/null
@@ -1,455 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="header">
-      巡视人员轨迹处理
-    </div>
-    <el-form ref="form" :model="listQuery" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="人员信息" prop="personName">
-            <el-select v-model="listQuery.personName" filterable size="small" placeholder="请输入人员姓名/身份证">
-              <el-option
-                v-for="item in personNameList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="起止时间" prop="timeRange">
-            <el-date-picker
-              v-model="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="6">
-          <el-form-item label="监控点位" prop="point">
-            <select-tree v-model="listQuery.point" placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="最小相似度" label-width="120px" prop="minSimilarity">
-            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
-          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
-            查询
-          </el-button>
-          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
-            重置
-          </el-button>
-          <el-button type="primary" size="small" @click="draw">
-            驾驶舱轨迹上图
-          </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="../../assets/404_images/404.png" style="width:100%;height:100%">
-            </div>
-            <div class="title text-over">
-              摄像头摄像头摄像头摄像头摄像头摄像头摄像头摄像头00{{ child }}
-            </div>
-            <div class="desc text-over">
-              这是详情描述这是详情描述这是详情描述这是详情描述这是详情描述
-            </div>
-            <div class="date">
-              2023-1-1 12:00:32
-            </div>
-            <div class="ratio">
-              50%
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { hikPic, userList } from '@/api/person'
-import { getCameraList } from '@/api/device'
-import { getDate } from '@/utils/calendarUtil'
-import SelectTree from '@/components/SelectTree/singleSelect'
-
-export default {
-  name: 'TrailDialog',
-  components: { SelectTree },
-  data() {
-    return {
-      listQuery: {
-        facePicUrl: '', // 图片url
-        personName: '', // 人员名称
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
-        point: 'IP CAMERA', // 点位
-        minSimilarity: '' // 相似度
-      },
-      timeRange: [], // 时间范围
-      personNameList: [],
-      resourceTreeList: [],
-      defaultProps: {
-        children: 'children',
-        value: 'id',
-        label: 'devName'
-      },
-      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
-      rules: {
-        point: [
-          { required: true, message: '请填写监控点位', trigger: 'blur' }
-        ],
-        personName: [
-          { required: true, message: '请填写人员信息', trigger: 'blur' }
-        ],
-        minSimilarity: [
-          { required: true, message: '请填写最小相似度', trigger: 'blur' }
-        ],
-        timeRange: [
-          { required: true, message: '请填写日期', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  watch: {
-    timeRange(val) {
-      if (val && val.length > 0) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      } else {
-        this.listQuery.startTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  },
-  created() {
-    this.list = this.handleListOrder(this.list) // 测试列表数据
-    this.handleGetUserList() // 获取人员信息数据
-    this.handlePointTreeData() // 获取点位数据
-  },
-  methods: {
-    // 获取点位树
-    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() {
-      userList({ keywords: '' }).then(res => {
-        console.log(res)
-      })
-    },
-    // 搜索请求发起
-    fetchData() {
-      hikPic(this.listQuery).then(response => {
-        if (response.code === 200) {
-          this.list = response.data
-        }
-      })
-    },
-    // 清除输入
-    clearInput() {
-      this.listQuery.personName = ''
-      this.listQuery.point = ''
-      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
-      this.listQuery.endTime = getDate(0, 'SECOND')
-      this.listQuery.minSimilarity = ''
-      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
-    },
-    // 搜索
-    search() {
-      console.log(this.listQuery)
-      // 取消校验
-      // if (this.listQuery.personName === '') {
-      //   this.$message.warning('请输入人员姓名!')
-      //   return
-      // }
-      // this.$refs.form.validate((valid) => {
-      //   if (valid) {
-      //     this.fetchData()
-      //   } else {
-      //     this.$message.warning('请检查输入信息!')
-      //   }
-      // })
-      this.fetchData()
-    },
-    // 驾驶舱点击上图
-    draw() {
-      console.log('上图')
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-  }
-  ::v-deep(.el-range-input){
-    background: transparent !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;
-  }
-  ::-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%;
-      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;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:236px;
-            height:138px;
-            overflow: hidden;
-          }
-          .title{
-            width:200px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:300px;
-            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;
-          }
-          .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;
-      }
-    }
-</style>

diff --git a/src/api/person.js b/src/api/person.js
index 62f301f..8a79c27 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -2,7 +2,9 @@
  * 员工管理接口
  */
 import request from '@/utils/request'
-
+import axios from 'axios'
+const { CancelToken } = axios
+let cancel = null
 export function getAttendanceListPage(params) {
   return request({
     url: 'attendanceInfo/listPage',
@@ -134,11 +136,14 @@
 }
 
 // 人员下拉列表
-export function userList(data) {
+export function userList(data, that) {
   return request({
-    // url: `propertyManage/person/list?keywords=${data}`,
     url: `propertyManage/person/list`,
     method: 'post',
-    data
+    data,
+    cancelToken: new CancelToken(cancelFn => {
+      cancel && cancel()
+      cancel = cancelFn
+    })
   })
 }
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index 1554578..d7a6cec 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -20,6 +20,7 @@
         highlight-current
         accordion
         @node-click="onClickNode"
+        :show-checkbox="multiple"
       />
     </el-scrollbar>
     <el-input
@@ -46,6 +47,11 @@
     event: 'selected'
   },
   props: {
+    // 是否显示多选框
+    multiple: {
+      type: Boolean,
+      defaut: false
+    },
     // 输入框尺寸
     inputSize: {
       type: String,
diff --git a/src/permission.js b/src/permission.js
index b8dc7ed..2d3b483 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -9,7 +9,7 @@
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom'] // 不重定向白名单
+const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom', '/board'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条
diff --git a/src/router/index.js b/src/router/index.js
index dbbc1a1..6c81d9b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,8 +44,7 @@
   { path: '/right', component: () => import('@/views/popup/right'), hidden: true },
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
-  { path: '/board', component: () => import('@/views/common/board'), hidden: true },
-
+  { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
@@ -86,5 +85,5 @@
 export const asyncRouterMap = [
   ...menuRouters,
   ...systemRouters,
-  { path: '*', redirect: '/404', hidden: true }
+  { path: '*', redirect: '/404', hidden: true },
 ]
diff --git a/src/views/common/board.vue b/src/views/common/board.vue
deleted file mode 100644
index 43416ea..0000000
--- a/src/views/common/board.vue
+++ /dev/null
@@ -1,455 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="header">
-      巡视人员轨迹处理
-    </div>
-    <el-form ref="form" :model="listQuery" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="人员信息" prop="personName">
-            <el-select v-model="listQuery.personName" filterable size="small" placeholder="请输入人员姓名/身份证">
-              <el-option
-                v-for="item in personNameList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="起止时间" prop="timeRange">
-            <el-date-picker
-              v-model="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="6">
-          <el-form-item label="监控点位" prop="point">
-            <select-tree v-model="listQuery.point" placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="最小相似度" label-width="120px" prop="minSimilarity">
-            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
-          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
-            查询
-          </el-button>
-          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
-            重置
-          </el-button>
-          <el-button type="primary" size="small" @click="draw">
-            驾驶舱轨迹上图
-          </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="../../assets/404_images/404.png" style="width:100%;height:100%">
-            </div>
-            <div class="title text-over">
-              摄像头摄像头摄像头摄像头摄像头摄像头摄像头摄像头00{{ child }}
-            </div>
-            <div class="desc text-over">
-              这是详情描述这是详情描述这是详情描述这是详情描述这是详情描述
-            </div>
-            <div class="date">
-              2023-1-1 12:00:32
-            </div>
-            <div class="ratio">
-              50%
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { hikPic, userList } from '@/api/person'
-import { getCameraList } from '@/api/device'
-import { getDate } from '@/utils/calendarUtil'
-import SelectTree from '@/components/SelectTree/singleSelect'
-
-export default {
-  name: 'TrailDialog',
-  components: { SelectTree },
-  data() {
-    return {
-      listQuery: {
-        facePicUrl: '', // 图片url
-        personName: '', // 人员名称
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
-        point: 'IP CAMERA', // 点位
-        minSimilarity: '' // 相似度
-      },
-      timeRange: [], // 时间范围
-      personNameList: [],
-      resourceTreeList: [],
-      defaultProps: {
-        children: 'children',
-        value: 'id',
-        label: 'devName'
-      },
-      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
-      rules: {
-        point: [
-          { required: true, message: '请填写监控点位', trigger: 'blur' }
-        ],
-        personName: [
-          { required: true, message: '请填写人员信息', trigger: 'blur' }
-        ],
-        minSimilarity: [
-          { required: true, message: '请填写最小相似度', trigger: 'blur' }
-        ],
-        timeRange: [
-          { required: true, message: '请填写日期', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  watch: {
-    timeRange(val) {
-      if (val && val.length > 0) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      } else {
-        this.listQuery.startTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  },
-  created() {
-    this.list = this.handleListOrder(this.list) // 测试列表数据
-    this.handleGetUserList() // 获取人员信息数据
-    this.handlePointTreeData() // 获取点位数据
-  },
-  methods: {
-    // 获取点位树
-    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() {
-      userList({ keywords: '' }).then(res => {
-        console.log(res)
-      })
-    },
-    // 搜索请求发起
-    fetchData() {
-      hikPic(this.listQuery).then(response => {
-        if (response.code === 200) {
-          this.list = response.data
-        }
-      })
-    },
-    // 清除输入
-    clearInput() {
-      this.listQuery.personName = ''
-      this.listQuery.point = ''
-      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
-      this.listQuery.endTime = getDate(0, 'SECOND')
-      this.listQuery.minSimilarity = ''
-      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
-    },
-    // 搜索
-    search() {
-      console.log(this.listQuery)
-      // 取消校验
-      // if (this.listQuery.personName === '') {
-      //   this.$message.warning('请输入人员姓名!')
-      //   return
-      // }
-      // this.$refs.form.validate((valid) => {
-      //   if (valid) {
-      //     this.fetchData()
-      //   } else {
-      //     this.$message.warning('请检查输入信息!')
-      //   }
-      // })
-      this.fetchData()
-    },
-    // 驾驶舱点击上图
-    draw() {
-      console.log('上图')
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-  }
-  ::v-deep(.el-range-input){
-    background: transparent !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;
-  }
-  ::-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%;
-      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;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:236px;
-            height:138px;
-            overflow: hidden;
-          }
-          .title{
-            width:200px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:300px;
-            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;
-          }
-          .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;
-      }
-    }
-</style>
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
new file mode 100644
index 0000000..85554f4
--- /dev/null
+++ b/src/views/popup/board.vue
@@ -0,0 +1,564 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      巡视人员轨迹处理
+    </div>
+    <el-form ref="form" :model="listQuery" 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="staffCode"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              popper-class="eloption"
+              :popper-append-to-body="false"
+              @change="handlePerson">
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.personName"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="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="12">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+            <!-- <select-tree v-model="point" ref="selectTree" multiple placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" /> -->
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="最小相似度" label-width="85px" prop="minSimilarity">
+            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
+          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
+            重置
+          </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">
+              {{ child.devName ? child.devName : '' }}
+            </div>
+            <div class="date">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:130px">
+              {{ 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 { getDate } from '@/utils/calendarUtil'
+// import SelectTree from '@/components/SelectTree/singleSelect'
+import moreSelect from './components/selectTree'
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personObj: {
+        personName: '',
+        personNo: '',
+        personPicture: '',
+        personType: '',
+        picUri: '',
+        serverIndexCode: '',
+        staffCode: '0'
+      },
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '' // 相似度
+      },
+      timeRange: [], // 时间范围
+      personNameList: [
+        // {
+        //   "personName": "郑嘉辉",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //   "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": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [],
+      rules: {
+        cameraIndexCodes: [
+          { required: true, message: '请填写监控点位', trigger: 'blur' }
+        ],
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: 'blur' }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.startTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 获取下拉树形点位数据
+    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
+          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() {
+      hikPic(this.listQuery).then(response => {
+        if (response.code === 200) {
+          // this.list = response.data
+          this.list = this.handleListOrder(response.data)
+        }
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = ''
+      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+      this.listQuery.endTime = getDate(0, 'SECOND')
+      this.listQuery.minSimilarity = ''
+      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
+    },
+    // 搜索
+    search() {
+      if (this.listQuery.minSimilarity >= 1 && this.listQuery.minSimilarity <= 100) {
+        this.fetchData()
+      } else {
+        this.$message.warning('相似度只能填1-100区间!')
+      }
+      console.log(this.listQuery)
+      // 取消校验
+      // if (this.listQuery.personName === '') {
+      //   this.$message.warning('请输入人员姓名!')
+      //   return
+      // }
+      // this.$refs.form.validate((valid) => {
+      //   if (valid) {
+      //     this.fetchData()
+      //   } else {
+      //     this.$message.warning('请检查输入信息!')
+      //   }
+      // })
+
+    }
+  }
+}
+</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%;
+      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:200px;
+            position: absolute;
+            left:42%;
+            top: 40px;
+            font-size: 20px;
+            color:#40C3F1;
+          }
+          .desc{
+            width:300px;
+            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: 30px;
+      top: 40px;
+      width: 190px;
+      height: 138px;
+      overflow: hidden;
+      z-index: -1;
+    }
+    .list-wrap .main .list-item .date,.list-wrap .main .list-item .ratio{
+      left:52% !important;
+    }
+</style>

diff --git a/src/api/person.js b/src/api/person.js
index 62f301f..8a79c27 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -2,7 +2,9 @@
  * 员工管理接口
  */
 import request from '@/utils/request'
-
+import axios from 'axios'
+const { CancelToken } = axios
+let cancel = null
 export function getAttendanceListPage(params) {
   return request({
     url: 'attendanceInfo/listPage',
@@ -134,11 +136,14 @@
 }
 
 // 人员下拉列表
-export function userList(data) {
+export function userList(data, that) {
   return request({
-    // url: `propertyManage/person/list?keywords=${data}`,
     url: `propertyManage/person/list`,
     method: 'post',
-    data
+    data,
+    cancelToken: new CancelToken(cancelFn => {
+      cancel && cancel()
+      cancel = cancelFn
+    })
   })
 }
diff --git a/src/components/SelectTree/singleSelect.vue b/src/components/SelectTree/singleSelect.vue
index 1554578..d7a6cec 100644
--- a/src/components/SelectTree/singleSelect.vue
+++ b/src/components/SelectTree/singleSelect.vue
@@ -20,6 +20,7 @@
         highlight-current
         accordion
         @node-click="onClickNode"
+        :show-checkbox="multiple"
       />
     </el-scrollbar>
     <el-input
@@ -46,6 +47,11 @@
     event: 'selected'
   },
   props: {
+    // 是否显示多选框
+    multiple: {
+      type: Boolean,
+      defaut: false
+    },
     // 输入框尺寸
     inputSize: {
       type: String,
diff --git a/src/permission.js b/src/permission.js
index b8dc7ed..2d3b483 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -9,7 +9,7 @@
 
 NProgress.configure({ showSpinner: false })// NProgress configuration
 
-const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom'] // 不重定向白名单
+const whiteList = ['/login', 'config/baseconfig', '/floor', '/device/pop', '/case/pop', '/top', '/left', '/right', '/bottom', '/board'] // 不重定向白名单
 // 全局钩子
 router.beforeEach((to, from, next) => {
   NProgress.start() // 加载进度条
diff --git a/src/router/index.js b/src/router/index.js
index dbbc1a1..6c81d9b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,8 +44,7 @@
   { path: '/right', component: () => import('@/views/popup/right'), hidden: true },
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
-  { path: '/board', component: () => import('@/views/common/board'), hidden: true },
-
+  { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
@@ -86,5 +85,5 @@
 export const asyncRouterMap = [
   ...menuRouters,
   ...systemRouters,
-  { path: '*', redirect: '/404', hidden: true }
+  { path: '*', redirect: '/404', hidden: true },
 ]
diff --git a/src/views/common/board.vue b/src/views/common/board.vue
deleted file mode 100644
index 43416ea..0000000
--- a/src/views/common/board.vue
+++ /dev/null
@@ -1,455 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="header">
-      巡视人员轨迹处理
-    </div>
-    <el-form ref="form" :model="listQuery" label-width="80px">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="人员信息" prop="personName">
-            <el-select v-model="listQuery.personName" filterable size="small" placeholder="请输入人员姓名/身份证">
-              <el-option
-                v-for="item in personNameList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="起止时间" prop="timeRange">
-            <el-date-picker
-              v-model="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="6">
-          <el-form-item label="监控点位" prop="point">
-            <select-tree v-model="listQuery.point" placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="最小相似度" label-width="120px" prop="minSimilarity">
-            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
-          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
-            查询
-          </el-button>
-          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
-            重置
-          </el-button>
-          <el-button type="primary" size="small" @click="draw">
-            驾驶舱轨迹上图
-          </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="../../assets/404_images/404.png" style="width:100%;height:100%">
-            </div>
-            <div class="title text-over">
-              摄像头摄像头摄像头摄像头摄像头摄像头摄像头摄像头00{{ child }}
-            </div>
-            <div class="desc text-over">
-              这是详情描述这是详情描述这是详情描述这是详情描述这是详情描述
-            </div>
-            <div class="date">
-              2023-1-1 12:00:32
-            </div>
-            <div class="ratio">
-              50%
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { hikPic, userList } from '@/api/person'
-import { getCameraList } from '@/api/device'
-import { getDate } from '@/utils/calendarUtil'
-import SelectTree from '@/components/SelectTree/singleSelect'
-
-export default {
-  name: 'TrailDialog',
-  components: { SelectTree },
-  data() {
-    return {
-      listQuery: {
-        facePicUrl: '', // 图片url
-        personName: '', // 人员名称
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
-        point: 'IP CAMERA', // 点位
-        minSimilarity: '' // 相似度
-      },
-      timeRange: [], // 时间范围
-      personNameList: [],
-      resourceTreeList: [],
-      defaultProps: {
-        children: 'children',
-        value: 'id',
-        label: 'devName'
-      },
-      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
-      rules: {
-        point: [
-          { required: true, message: '请填写监控点位', trigger: 'blur' }
-        ],
-        personName: [
-          { required: true, message: '请填写人员信息', trigger: 'blur' }
-        ],
-        minSimilarity: [
-          { required: true, message: '请填写最小相似度', trigger: 'blur' }
-        ],
-        timeRange: [
-          { required: true, message: '请填写日期', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  watch: {
-    timeRange(val) {
-      if (val && val.length > 0) {
-        this.listQuery.startTime = val[0]
-        this.listQuery.endTime = val[1]
-      } else {
-        this.listQuery.startTime = ''
-        this.listQuery.endTime = ''
-      }
-    }
-  },
-  created() {
-    this.list = this.handleListOrder(this.list) // 测试列表数据
-    this.handleGetUserList() // 获取人员信息数据
-    this.handlePointTreeData() // 获取点位数据
-  },
-  methods: {
-    // 获取点位树
-    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() {
-      userList({ keywords: '' }).then(res => {
-        console.log(res)
-      })
-    },
-    // 搜索请求发起
-    fetchData() {
-      hikPic(this.listQuery).then(response => {
-        if (response.code === 200) {
-          this.list = response.data
-        }
-      })
-    },
-    // 清除输入
-    clearInput() {
-      this.listQuery.personName = ''
-      this.listQuery.point = ''
-      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
-      this.listQuery.endTime = getDate(0, 'SECOND')
-      this.listQuery.minSimilarity = ''
-      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
-    },
-    // 搜索
-    search() {
-      console.log(this.listQuery)
-      // 取消校验
-      // if (this.listQuery.personName === '') {
-      //   this.$message.warning('请输入人员姓名!')
-      //   return
-      // }
-      // this.$refs.form.validate((valid) => {
-      //   if (valid) {
-      //     this.fetchData()
-      //   } else {
-      //     this.$message.warning('请检查输入信息!')
-      //   }
-      // })
-      this.fetchData()
-    },
-    // 驾驶舱点击上图
-    draw() {
-      console.log('上图')
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-  }
-  ::v-deep(.el-range-input){
-    background: transparent !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;
-  }
-  ::-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%;
-      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;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:236px;
-            height:138px;
-            overflow: hidden;
-          }
-          .title{
-            width:200px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:300px;
-            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;
-          }
-          .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;
-      }
-    }
-</style>
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
new file mode 100644
index 0000000..85554f4
--- /dev/null
+++ b/src/views/popup/board.vue
@@ -0,0 +1,564 @@
+<template>
+  <div class="wrap">
+    <div class="header">
+      巡视人员轨迹处理
+    </div>
+    <el-form ref="form" :model="listQuery" 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="staffCode"
+              :loading="selectLoading"
+              :remote-method="remoteMethod"
+              clear
+              filterable
+              remote
+              reserve-keyword
+              size="small"
+              placeholder="请输入人员姓名"
+              popper-class="eloption"
+              :popper-append-to-body="false"
+              @change="handlePerson">
+              <el-option
+                v-for="item in personNameList"
+                :key="item.staffCode"
+                :label="item.personName + ' ' + item.personType"
+                :value="item.personName"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起止时间" prop="timeRange">
+            <el-date-picker
+              v-model="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="12">
+          <el-form-item label="监控点位" prop="point">
+            <moreSelect ref="moreSelect" placeholder="默认全部监控点位，可选择" :options="resourceTreeList" :props="defaultProps" multiple :value-multiple="point" @getValue="getSelectedValue" />
+            <!-- <select-tree v-model="point" ref="selectTree" multiple placeholder="请输入摄像头监控点位" input-size="small" :options="resourceTreeList" :props="defaultProps" /> -->
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="最小相似度" label-width="85px" prop="minSimilarity">
+            <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间1-100" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6" style="margin-top:4px;display:flex;justify-content: end;padding-right: 25px;">
+          <el-button type="primary" size="small" style="margin-right:20px" @click="search">
+            查询
+          </el-button>
+          <el-button type="danger" size="small" style="margin-right:20px" @click="clearInput">
+            重置
+          </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">
+              {{ child.devName ? child.devName : '' }}
+            </div>
+            <div class="date">
+              {{ child.time ? child.time : '' }}
+            </div>
+            <div class="ratio" style="width:130px">
+              {{ 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 { getDate } from '@/utils/calendarUtil'
+// import SelectTree from '@/components/SelectTree/singleSelect'
+import moreSelect from './components/selectTree'
+export default {
+  name: 'TrailDialog',
+  components: { moreSelect },
+  data() {
+    return {
+      selectLoading: false,
+      personObj: {
+        personName: '',
+        personNo: '',
+        personPicture: '',
+        personType: '',
+        picUri: '',
+        serverIndexCode: '',
+        staffCode: '0'
+      },
+      point: [],
+      listQuery: {
+        facePicUrl: '', // 图片url
+        personName: '', // 人员名称
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        cameraIndexCodes: [], // 点位
+        minSimilarity: '' // 相似度
+      },
+      timeRange: [], // 时间范围
+      personNameList: [
+        // {
+        //   "personName": "郑嘉辉",
+        //   "personNo": "TV11326",
+        //   "personPicture": "",
+        //   "personType": "",
+        //   "picUri": "",
+        //   "serverIndexCode": "",
+        //   "staffCode": ""
+        // },
+        // {
+        //   "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": ""
+        // }
+      ],
+      resourceTreeList: [],
+      defaultProps: {
+        children: 'children',
+        value: 'id',
+        label: 'devName'
+      },
+      list: [],
+      rules: {
+        cameraIndexCodes: [
+          { required: true, message: '请填写监控点位', trigger: 'blur' }
+        ],
+        personName: [
+          { required: true, message: '请填写人员信息', trigger: 'blur' }
+        ],
+        minSimilarity: [
+          { required: true, message: '请填写最小相似度', trigger: 'blur' }
+        ],
+        timeRange: [
+          { required: true, message: '请填写日期', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    timeRange(val) {
+      if (val && val.length > 0) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      } else {
+        this.listQuery.startTime = ''
+        this.listQuery.endTime = ''
+      }
+    }
+  },
+  created() {
+    // this.list = this.handleListOrder(this.list)
+    // this.handleGetUserList() // 获取人员信息数据
+    this.handlePointTreeData() // 获取点位数据
+  },
+  methods: {
+    // 获取下拉树形点位数据
+    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
+          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() {
+      hikPic(this.listQuery).then(response => {
+        if (response.code === 200) {
+          // this.list = response.data
+          this.list = this.handleListOrder(response.data)
+        }
+      })
+    },
+    // 清除输入
+    clearInput() {
+      this.$refs.moreSelect.clearHandle()
+      this.point = []
+      this.listQuery.personName = ''
+      this.listQuery.facePicUrl = ''
+      this.listQuery.cameraIndexCodes = ''
+      this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+      this.listQuery.endTime = getDate(0, 'SECOND')
+      this.listQuery.minSimilarity = ''
+      this.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
+    },
+    // 搜索
+    search() {
+      if (this.listQuery.minSimilarity >= 1 && this.listQuery.minSimilarity <= 100) {
+        this.fetchData()
+      } else {
+        this.$message.warning('相似度只能填1-100区间!')
+      }
+      console.log(this.listQuery)
+      // 取消校验
+      // if (this.listQuery.personName === '') {
+      //   this.$message.warning('请输入人员姓名!')
+      //   return
+      // }
+      // this.$refs.form.validate((valid) => {
+      //   if (valid) {
+      //     this.fetchData()
+      //   } else {
+      //     this.$message.warning('请检查输入信息!')
+      //   }
+      // })
+
+    }
+  }
+}
+</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%;
+      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:200px;
+            position: absolute;
+            left:42%;
+            top: 40px;
+            font-size: 20px;
+            color:#40C3F1;
+          }
+          .desc{
+            width:300px;
+            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: 30px;
+      top: 40px;
+      width: 190px;
+      height: 138px;
+      overflow: hidden;
+      z-index: -1;
+    }
+    .list-wrap .main .list-item .date,.list-wrap .main .list-item .ratio{
+      left:52% !important;
+    }
+</style>
diff --git a/src/views/popup/components/selectTree.vue b/src/views/popup/components/selectTree.vue
new file mode 100644
index 0000000..5211eca
--- /dev/null
+++ b/src/views/popup/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>