diff --git a/src/api/minipro.js b/src/api/minipro.js
new file mode 100644
index 0000000..99c71f0
--- /dev/null
+++ b/src/api/minipro.js
@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+// 小程序后台管理相关接口
+const baseURL = 'https://visitor.gd.smartlog.work'
+
+// 消息列表
+export function GetMessageList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `message/messageList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 消息导出
+export function messageExport(data) {
+  return request({
+    baseURL,
+    url: '/message/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 用户列表
+export function getUserList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `user/getUserList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 人员导入
+export function batchImportFire(fileobj) {
+  const param = new FormData()
+  param.append('multipartFile', fileobj)
+  return request({
+    baseURL,
+    url: '/user/importList',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
+// 模板下载
+export function downloadTemplate(fileName) {
+  return request({
+    baseURL,
+    url: '/user/download',
+    method: 'get',
+    params: {
+      fileName: 'userModel.xlsx'
+    },
+    responseType: 'blob'
+  })
+}
+
+// 访客导出
+export function userExport(data) {
+  return request({
+    baseURL,
+    url: '/user/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 新增
+export function addUser(data) {
+  return request({
+    baseURL,
+    url: 'user/addUser',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateUser(data) {
+  return request({
+    baseURL,
+    url: 'user/updateUser',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delUser(data) {
+  return request({
+    baseURL,
+    url: 'user/delUser',
+    method: 'post',
+    data
+  })
+}
+
+// 访客列表
+export function getApplyList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `visitor/getApplyList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 访客导出
+export function visitorExport(data) {
+  return request({
+    baseURL,
+    url: '/visitor/exportApplyList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+

diff --git a/src/api/minipro.js b/src/api/minipro.js
new file mode 100644
index 0000000..99c71f0
--- /dev/null
+++ b/src/api/minipro.js
@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+// 小程序后台管理相关接口
+const baseURL = 'https://visitor.gd.smartlog.work'
+
+// 消息列表
+export function GetMessageList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `message/messageList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 消息导出
+export function messageExport(data) {
+  return request({
+    baseURL,
+    url: '/message/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 用户列表
+export function getUserList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `user/getUserList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 人员导入
+export function batchImportFire(fileobj) {
+  const param = new FormData()
+  param.append('multipartFile', fileobj)
+  return request({
+    baseURL,
+    url: '/user/importList',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
+// 模板下载
+export function downloadTemplate(fileName) {
+  return request({
+    baseURL,
+    url: '/user/download',
+    method: 'get',
+    params: {
+      fileName: 'userModel.xlsx'
+    },
+    responseType: 'blob'
+  })
+}
+
+// 访客导出
+export function userExport(data) {
+  return request({
+    baseURL,
+    url: '/user/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 新增
+export function addUser(data) {
+  return request({
+    baseURL,
+    url: 'user/addUser',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateUser(data) {
+  return request({
+    baseURL,
+    url: 'user/updateUser',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delUser(data) {
+  return request({
+    baseURL,
+    url: 'user/delUser',
+    method: 'post',
+    data
+  })
+}
+
+// 访客列表
+export function getApplyList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `visitor/getApplyList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 访客导出
+export function visitorExport(data) {
+  return request({
+    baseURL,
+    url: '/visitor/exportApplyList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 6c81d9b..a29418b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,9 @@
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
   { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
+  // { path: '/messageList', component: () => import('@/views/backstage/messageList'), hidden: true },
+  // { path: '/personList', component: () => import('@/views/backstage/personList'), hidden: true },
+  // { path: '/visitList', component: () => import('@/views/backstage/visitList'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },

diff --git a/src/api/minipro.js b/src/api/minipro.js
new file mode 100644
index 0000000..99c71f0
--- /dev/null
+++ b/src/api/minipro.js
@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+// 小程序后台管理相关接口
+const baseURL = 'https://visitor.gd.smartlog.work'
+
+// 消息列表
+export function GetMessageList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `message/messageList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 消息导出
+export function messageExport(data) {
+  return request({
+    baseURL,
+    url: '/message/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 用户列表
+export function getUserList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `user/getUserList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 人员导入
+export function batchImportFire(fileobj) {
+  const param = new FormData()
+  param.append('multipartFile', fileobj)
+  return request({
+    baseURL,
+    url: '/user/importList',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
+// 模板下载
+export function downloadTemplate(fileName) {
+  return request({
+    baseURL,
+    url: '/user/download',
+    method: 'get',
+    params: {
+      fileName: 'userModel.xlsx'
+    },
+    responseType: 'blob'
+  })
+}
+
+// 访客导出
+export function userExport(data) {
+  return request({
+    baseURL,
+    url: '/user/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 新增
+export function addUser(data) {
+  return request({
+    baseURL,
+    url: 'user/addUser',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateUser(data) {
+  return request({
+    baseURL,
+    url: 'user/updateUser',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delUser(data) {
+  return request({
+    baseURL,
+    url: 'user/delUser',
+    method: 'post',
+    data
+  })
+}
+
+// 访客列表
+export function getApplyList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `visitor/getApplyList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 访客导出
+export function visitorExport(data) {
+  return request({
+    baseURL,
+    url: '/visitor/exportApplyList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 6c81d9b..a29418b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,9 @@
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
   { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
+  // { path: '/messageList', component: () => import('@/views/backstage/messageList'), hidden: true },
+  // { path: '/personList', component: () => import('@/views/backstage/personList'), hidden: true },
+  // { path: '/visitList', component: () => import('@/views/backstage/visitList'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 9292a60..907a6ea 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -15,7 +15,7 @@
         path: '/caseList',
         name: 'CaseList',
         component: () => import('@/views/case/caseList'),
-        meta: { title: '安防事件管理', icon: ''}
+        meta: { title: '安防事件管理', icon: '' }
       },
       {
         path: '/caseLevelList',
@@ -263,6 +263,36 @@
         meta: { title: '能源数据', icon: '' }
       }
     ]
+  },
+  {
+    path: 'backstage',
+    component: Layout,
+    redirect: '/backstage',
+    name: 'Backstage',
+    meta: {
+      title: '',
+      icon: 'icon-config' // 图标
+    },
+    children: [
+      {
+        path: '/messageList',
+        name: 'MessageList',
+        component: () => import('@/views/backstage/messageList'),
+        meta: { title: '消息后台', icon: '' }
+      },
+      {
+        path: '/personList',
+        name: 'PersonList',
+        component: () => import('@/views/backstage/personList'),
+        meta: { title: '人员管理后台', icon: '' }
+      },
+      {
+        path: '/visitAdmin',
+        name: 'VisitList',
+        component: () => import('@/views/backstage/visitList'),
+        meta: { title: '访客申请后台', icon: '' }
+      }
+    ]
   }
   // {
   //   path: 'security',

diff --git a/src/api/minipro.js b/src/api/minipro.js
new file mode 100644
index 0000000..99c71f0
--- /dev/null
+++ b/src/api/minipro.js
@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+// 小程序后台管理相关接口
+const baseURL = 'https://visitor.gd.smartlog.work'
+
+// 消息列表
+export function GetMessageList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `message/messageList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 消息导出
+export function messageExport(data) {
+  return request({
+    baseURL,
+    url: '/message/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 用户列表
+export function getUserList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `user/getUserList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 人员导入
+export function batchImportFire(fileobj) {
+  const param = new FormData()
+  param.append('multipartFile', fileobj)
+  return request({
+    baseURL,
+    url: '/user/importList',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
+// 模板下载
+export function downloadTemplate(fileName) {
+  return request({
+    baseURL,
+    url: '/user/download',
+    method: 'get',
+    params: {
+      fileName: 'userModel.xlsx'
+    },
+    responseType: 'blob'
+  })
+}
+
+// 访客导出
+export function userExport(data) {
+  return request({
+    baseURL,
+    url: '/user/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 新增
+export function addUser(data) {
+  return request({
+    baseURL,
+    url: 'user/addUser',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateUser(data) {
+  return request({
+    baseURL,
+    url: 'user/updateUser',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delUser(data) {
+  return request({
+    baseURL,
+    url: 'user/delUser',
+    method: 'post',
+    data
+  })
+}
+
+// 访客列表
+export function getApplyList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `visitor/getApplyList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 访客导出
+export function visitorExport(data) {
+  return request({
+    baseURL,
+    url: '/visitor/exportApplyList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 6c81d9b..a29418b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,9 @@
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
   { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
+  // { path: '/messageList', component: () => import('@/views/backstage/messageList'), hidden: true },
+  // { path: '/personList', component: () => import('@/views/backstage/personList'), hidden: true },
+  // { path: '/visitList', component: () => import('@/views/backstage/visitList'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 9292a60..907a6ea 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -15,7 +15,7 @@
         path: '/caseList',
         name: 'CaseList',
         component: () => import('@/views/case/caseList'),
-        meta: { title: '安防事件管理', icon: ''}
+        meta: { title: '安防事件管理', icon: '' }
       },
       {
         path: '/caseLevelList',
@@ -263,6 +263,36 @@
         meta: { title: '能源数据', icon: '' }
       }
     ]
+  },
+  {
+    path: 'backstage',
+    component: Layout,
+    redirect: '/backstage',
+    name: 'Backstage',
+    meta: {
+      title: '',
+      icon: 'icon-config' // 图标
+    },
+    children: [
+      {
+        path: '/messageList',
+        name: 'MessageList',
+        component: () => import('@/views/backstage/messageList'),
+        meta: { title: '消息后台', icon: '' }
+      },
+      {
+        path: '/personList',
+        name: 'PersonList',
+        component: () => import('@/views/backstage/personList'),
+        meta: { title: '人员管理后台', icon: '' }
+      },
+      {
+        path: '/visitAdmin',
+        name: 'VisitList',
+        component: () => import('@/views/backstage/visitList'),
+        meta: { title: '访客申请后台', icon: '' }
+      }
+    ]
   }
   // {
   //   path: 'security',
diff --git a/src/views/backstage/messageList.vue b/src/views/backstage/messageList.vue
new file mode 100644
index 0000000..b6ae4ce
--- /dev/null
+++ b/src/views/backstage/messageList.vue
@@ -0,0 +1,250 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.id" size="small" placeholder="请输入消息编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.messageId" size="small" placeholder="请输入访客申请编号" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="发送状态" style="width: 200px" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item >
+        <el-date-picker
+          v-model="listQuery.createTime"
+          style="width: 100%"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择发送时间"
+        />
+      </search-item>
+      <br>
+      <search-item>
+        <el-input v-model.trim="listQuery.account" size="small" placeholder="请输入接收人证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.name" size="small" placeholder="请输入接收人姓名" />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.createEndTime"
+          style="width:200px"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择接收时间"
+        />
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
+          导出
+        </el-button>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import { GetMessageList, messageExport } from '@/api/minipro'
+export default {
+  name: 'MessageList',
+  data() {
+    return {
+      listQuery: {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      statusList: [
+        {
+          name: '发送成功',
+          value: '0'
+        },
+        {
+          name: '发送失败',
+          value: '1'
+        }
+      ],
+      columns: [
+        {
+          text: '消息编号',
+          value: 'id',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请编号',
+          value: 'messageId',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请状态',
+          value: 'visitorApplyStatus',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送状态',
+          value: 'status',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送时间',
+          value: 'createTime',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '接收人证件编号',
+          value: 'account',
+          align: 'center'
+        },
+        {
+          text: '接收人姓名',
+          value: 'name',
+          align: 'center',
+          width: 150
+        }
+        // {
+        //   text: '接收人时间',
+        //   value: 'createEndTime',
+        //   align: 'center',
+        //   width: 200
+        // }
+      ], // 显示列
+      list: [], // 列表数据
+      selectList: [], // 选中的数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      GetMessageList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        console.log(res)
+        if (res.code === 200) {
+          this.list = res.data.rows
+          this.total = res.data.total
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    handleSelectionChange(select) {
+      this.selectList = select
+      console.log(this.selectList)
+    },
+    // 导出
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        messageExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `消息列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>

diff --git a/src/api/minipro.js b/src/api/minipro.js
new file mode 100644
index 0000000..99c71f0
--- /dev/null
+++ b/src/api/minipro.js
@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+// 小程序后台管理相关接口
+const baseURL = 'https://visitor.gd.smartlog.work'
+
+// 消息列表
+export function GetMessageList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `message/messageList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 消息导出
+export function messageExport(data) {
+  return request({
+    baseURL,
+    url: '/message/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 用户列表
+export function getUserList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `user/getUserList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 人员导入
+export function batchImportFire(fileobj) {
+  const param = new FormData()
+  param.append('multipartFile', fileobj)
+  return request({
+    baseURL,
+    url: '/user/importList',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
+// 模板下载
+export function downloadTemplate(fileName) {
+  return request({
+    baseURL,
+    url: '/user/download',
+    method: 'get',
+    params: {
+      fileName: 'userModel.xlsx'
+    },
+    responseType: 'blob'
+  })
+}
+
+// 访客导出
+export function userExport(data) {
+  return request({
+    baseURL,
+    url: '/user/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 新增
+export function addUser(data) {
+  return request({
+    baseURL,
+    url: 'user/addUser',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateUser(data) {
+  return request({
+    baseURL,
+    url: 'user/updateUser',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delUser(data) {
+  return request({
+    baseURL,
+    url: 'user/delUser',
+    method: 'post',
+    data
+  })
+}
+
+// 访客列表
+export function getApplyList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `visitor/getApplyList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 访客导出
+export function visitorExport(data) {
+  return request({
+    baseURL,
+    url: '/visitor/exportApplyList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 6c81d9b..a29418b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,9 @@
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
   { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
+  // { path: '/messageList', component: () => import('@/views/backstage/messageList'), hidden: true },
+  // { path: '/personList', component: () => import('@/views/backstage/personList'), hidden: true },
+  // { path: '/visitList', component: () => import('@/views/backstage/visitList'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 9292a60..907a6ea 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -15,7 +15,7 @@
         path: '/caseList',
         name: 'CaseList',
         component: () => import('@/views/case/caseList'),
-        meta: { title: '安防事件管理', icon: ''}
+        meta: { title: '安防事件管理', icon: '' }
       },
       {
         path: '/caseLevelList',
@@ -263,6 +263,36 @@
         meta: { title: '能源数据', icon: '' }
       }
     ]
+  },
+  {
+    path: 'backstage',
+    component: Layout,
+    redirect: '/backstage',
+    name: 'Backstage',
+    meta: {
+      title: '',
+      icon: 'icon-config' // 图标
+    },
+    children: [
+      {
+        path: '/messageList',
+        name: 'MessageList',
+        component: () => import('@/views/backstage/messageList'),
+        meta: { title: '消息后台', icon: '' }
+      },
+      {
+        path: '/personList',
+        name: 'PersonList',
+        component: () => import('@/views/backstage/personList'),
+        meta: { title: '人员管理后台', icon: '' }
+      },
+      {
+        path: '/visitAdmin',
+        name: 'VisitList',
+        component: () => import('@/views/backstage/visitList'),
+        meta: { title: '访客申请后台', icon: '' }
+      }
+    ]
   }
   // {
   //   path: 'security',
diff --git a/src/views/backstage/messageList.vue b/src/views/backstage/messageList.vue
new file mode 100644
index 0000000..b6ae4ce
--- /dev/null
+++ b/src/views/backstage/messageList.vue
@@ -0,0 +1,250 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.id" size="small" placeholder="请输入消息编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.messageId" size="small" placeholder="请输入访客申请编号" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="发送状态" style="width: 200px" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item >
+        <el-date-picker
+          v-model="listQuery.createTime"
+          style="width: 100%"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择发送时间"
+        />
+      </search-item>
+      <br>
+      <search-item>
+        <el-input v-model.trim="listQuery.account" size="small" placeholder="请输入接收人证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.name" size="small" placeholder="请输入接收人姓名" />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.createEndTime"
+          style="width:200px"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择接收时间"
+        />
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
+          导出
+        </el-button>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import { GetMessageList, messageExport } from '@/api/minipro'
+export default {
+  name: 'MessageList',
+  data() {
+    return {
+      listQuery: {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      statusList: [
+        {
+          name: '发送成功',
+          value: '0'
+        },
+        {
+          name: '发送失败',
+          value: '1'
+        }
+      ],
+      columns: [
+        {
+          text: '消息编号',
+          value: 'id',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请编号',
+          value: 'messageId',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请状态',
+          value: 'visitorApplyStatus',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送状态',
+          value: 'status',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送时间',
+          value: 'createTime',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '接收人证件编号',
+          value: 'account',
+          align: 'center'
+        },
+        {
+          text: '接收人姓名',
+          value: 'name',
+          align: 'center',
+          width: 150
+        }
+        // {
+        //   text: '接收人时间',
+        //   value: 'createEndTime',
+        //   align: 'center',
+        //   width: 200
+        // }
+      ], // 显示列
+      list: [], // 列表数据
+      selectList: [], // 选中的数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      GetMessageList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        console.log(res)
+        if (res.code === 200) {
+          this.list = res.data.rows
+          this.total = res.data.total
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    handleSelectionChange(select) {
+      this.selectList = select
+      console.log(this.selectList)
+    },
+    // 导出
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        messageExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `消息列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/backstage/personList.vue b/src/views/backstage/personList.vue
new file mode 100644
index 0000000..5206f7a
--- /dev/null
+++ b/src/views/backstage/personList.vue
@@ -0,0 +1,586 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.account" size="small" placeholder="请输入员工证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.name" size="small" placeholder="请输入员工姓名" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.documentType" size="small" placeholder="请选择证件类型" style="width: 200px" clearable>
+          <el-option
+            v-for="item in cardTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.phone" size="small" placeholder="请输入手机号" />
+      </search-item>
+      <br>
+      <search-item>
+        <el-select v-model="listQuery.logonState" size="small" placeholder="是否已在小程序注册" style="width: 190px" clearable >
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item label="员工类型" prop="staffType">
+        <el-select v-model="listQuery.staffType" size="small" placeholder="请选择员工类型" style="width: 190px" clearable>
+          <el-option
+            v-for="item in personList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roleName" size="small" placeholder="请选择员工角色" style="width: 190px" clearable >
+          <el-option
+            v-for="item in roleList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+      @selectionChange="handleSelectionChange"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-edit" @click="add()">
+          新增
+        </el-button>
+        <el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()">
+          删除
+        </el-button>
+        <el-button size="small" class="edit_btn" icon="el-icon-download" style="float:right" @click="exportFile()">
+          导出
+        </el-button>
+        <el-upload
+          :limit="1"
+          :show-file-list="false"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          action="string"
+          style="float:right; margin:0 3px;"
+          accept=".xls,.xlsx"
+        >
+          <el-button slot="trigger" size="small" icon="el-icon-folder-add">
+            批量导入
+          </el-button>
+        </el-upload>
+        <el-button size="small" class="edit_btn" style="margin-left:3px" @click="downTemplate()">
+          下载批量导入模板
+        </el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="80">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog
+      :title="`${editStatus ? '编辑' : '添加'}员工`"
+      :visible.sync="dialogVisible"
+      width="50%"
+      append-to-body
+      center
+      :close-on-click-modal="false"
+    >
+      <el-form ref="ruleForm" :rules="rules" :model="form" label-position="right" label-width="140px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="员工证件编号" prop="account">
+              <el-input v-model.trim="form.account" :disabled="editStatus" type="text" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工姓名" prop="name">
+              <el-input v-model.trim="form.name" :disabled="editStatus" type="text" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件类型" prop="documentType">
+              <el-select v-model="form.documentType" placeholder="必填">
+                <el-option
+                  v-for="item in cardTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model.trim="form.phone" type="text" placeholder="请输入手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工类型" prop="staffType">
+              <el-select v-model="form.staffType" placeholder="必填">
+                <el-option
+                  v-for="item in personList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工角色" prop="staffRole">
+              <el-radio-group
+                v-model="form.staffRole"
+                style="display:flex;margin-top: 14px;"
+                @change="changeRole"
+              >
+                <el-radio label="1319814546311985641">
+                  管理员
+                </el-radio><br>
+                <el-radio label="1397015476211346433">
+                  普通员工
+                </el-radio>
+                <span
+                  v-show="form.staffRole == '1319814546311985641'"
+                  class="el-form-item__error"
+                >具有查看物联网安全监测模块权限</span>
+                <span
+                  v-show="form.staffRole == '1397015476211346433'"
+                  class="el-form-item__error"
+                >不具有查看物联网安全监测模块权限</span>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" style="margin-top:20px">
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model.trim="form.remark" :rows="3" type="textarea" placeholder="备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          确定
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import { getUserList, addUser, updateUser, delUser, userExport, downloadTemplate, batchImportFire } from '@/api/minipro'
+export default {
+  name: 'PersonList',
+  data() {
+    return {
+      editStatus: false,
+      dialogVisible: false,
+      btnLoading: false,
+      listQuery: {
+        phone: '',
+        account: '',
+        name: '',
+        documentType: '',
+        roleName: '',
+        staffType: '',
+        logonState: '',
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      cardTypeList: [
+        {
+          name: '出入证',
+          value: '0'
+        },
+        {
+          name: '工作证',
+          value: '1'
+        }
+      ],
+      statusList: [
+        {
+          name: '是',
+          value: 0
+        },
+        {
+          name: '否',
+          value: 1
+        }
+      ],
+      personList: [
+        {
+          name: '正式员工',
+          value: '1556844891841564673'
+        },
+        {
+          name: '物业人员',
+          value: '1556844890952372225'
+        },
+        {
+          name: '运维人员',
+          value: '1556844891459883009'
+        }
+      ],
+      roleList: [
+        {
+          name: '管理员',
+          value: '1319814546311985641'
+        },
+        {
+          name: '普通员工',
+          value: '1397015476211346433'
+        }
+      ],
+      columns: [
+        {
+          text: '员工证件编号',
+          value: 'account',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '员工姓名',
+          value: 'name',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '证件类型',
+          value: 'documentTypeName',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '手机号',
+          value: 'phone',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '是否已在小程序注册',
+          value: 'logonState',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '员工类型',
+          value: 'staffTypeName',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '员工角色',
+          value: 'staffRoleName',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '备注',
+          value: 'remark',
+          align: 'center'
+        }
+      ], // 显示列
+      filename: '',
+      fileList: [], // 文件数据
+      list: [], // 列表数据
+      selectList: [], // 选中的数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: true
+        }
+      }, // 表格属性
+      form: {
+        account: '',
+        name: '',
+        documentType: '',
+        phone: '',
+        staffType: '',
+        staffRole: '',
+        remark: ''
+      },
+      rules: {
+        account: [
+          { required: true, message: '请输入证件编号', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入员工名称', trigger: 'blur' }
+        ],
+        documentType: [
+          { required: true, message: '请选择证件类型', trigger: 'blur' }
+        ],
+        staffType: [
+          { required: true, message: '请选择员工类型', trigger: 'blur' }
+        ],
+        staffRole: [
+          { required: true, message: '请选择员工角色', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      getUserList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        if (res.code === 200) {
+          this.list = res.data.rows
+          this.total = res.data.total
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        phone: '',
+        account: '',
+        name: '',
+        documentType: '',
+        roleName: '',
+        staffType: '',
+        logonState: '',
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    // 选中
+    handleSelectionChange(select) {
+      this.selectList = select
+      console.log(this.selectList)
+    },
+    // 新增
+    add() {
+      if (this.$refs.ruleForm) {
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      }
+      this.editStatus = false
+      this.dialogVisible = true
+      this.form = {
+        account: '',
+        name: '',
+        documentType: '',
+        phone: '',
+        staffType: '',
+        staffRole: '',
+        remark: ''
+      }
+    },
+    // 删除
+    batchDel() {
+      if (this.selectList.length === 0) {
+        this.$message.warning('暂未选中数据!')
+      } else {
+        const ids = this.selectList.map((item) => {
+          return item.id
+        })
+        delUser({ ids }).then(res => {
+          if (res.code === 200) {
+            this.$message.success('删除成功!')
+            this.fetchData()
+          }
+        })
+      }
+    },
+    // 修改
+    // eslint-disable-next-line vue/no-dupe-keys
+    edit(row) {
+      if (this.$refs.ruleForm) {
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      }
+      this.editStatus = true
+      this.dialogVisible = true
+      // const roleMap = {
+      //   '普通员工': '1397015476211346433',
+      //   '管理员': '1319814546311985641'
+      // }
+      this.form = row
+    },
+    changeRole(e) {
+      console.log(e)
+    },
+    // 确定
+    saveData() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          if (this.editStatus) {
+            updateUser({ ...this.form }).then(res => {
+              if (res.code === 200) {
+                this.$message.success('修改成功!')
+                this.dialogVisible = false
+                this.fetchData()
+              }
+            }).catch(_err => {
+              this.dialogVisible = false
+            })
+          } else {
+            addUser({ ...this.form }).then(res => {
+              console.log(res)
+              if (res.code === 200) {
+                this.$message.success('新增成功!')
+                this.dialogVisible = false
+                this.fetchData()
+              }
+            }).catch(_err => {
+              this.dialogVisible = false
+            })
+          }
+        } else {
+          this.$message.warning('请填写完整表单!')
+        }
+      })
+    },
+    // 取消
+    cancel() {
+      this.dialogVisible = false
+    },
+    uploadFile(param) {
+      // 判断文件大小是否符合要求
+      const _file = param.file
+      const isLt5M = _file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('请上传5M以下的excel文件')
+        return false
+      }
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '导入中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // 发起导入请求
+      batchImportFire(_file).then(res => {
+        loading.close() // 关闭加载动画
+        if (res.code === 200) {
+          this.$message.success('导入成功')
+          this.fetchData(false)
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch(() => {
+        loading.close() // 关闭加载动画
+      })
+      this.fileList = []
+    },
+    // 下载模板
+    downTemplate() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '数据处理中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      downloadTemplate().then(res => {
+        loading.close() // 关闭加载动画
+        const blob = new Blob([res.data])
+        const downloadElement = document.createElement('a')
+        const href = window.URL.createObjectURL(blob) // 创建下载的链接
+        downloadElement.href = href
+        downloadElement.download = '人员导入模板.xlsx' // 下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() // 点击下载
+        document.body.removeChild(downloadElement) // 下载完成移除元素
+        window.URL.revokeObjectURL(href) // 释放blob对象
+      }).catch((res) => {
+        loading.close()
+        this.$message.error(res.message)
+      })
+    },
+    // 导出
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        userExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `人员管理列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>

diff --git a/src/api/minipro.js b/src/api/minipro.js
new file mode 100644
index 0000000..99c71f0
--- /dev/null
+++ b/src/api/minipro.js
@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+// 小程序后台管理相关接口
+const baseURL = 'https://visitor.gd.smartlog.work'
+
+// 消息列表
+export function GetMessageList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `message/messageList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 消息导出
+export function messageExport(data) {
+  return request({
+    baseURL,
+    url: '/message/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 用户列表
+export function getUserList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `user/getUserList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 人员导入
+export function batchImportFire(fileobj) {
+  const param = new FormData()
+  param.append('multipartFile', fileobj)
+  return request({
+    baseURL,
+    url: '/user/importList',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
+// 模板下载
+export function downloadTemplate(fileName) {
+  return request({
+    baseURL,
+    url: '/user/download',
+    method: 'get',
+    params: {
+      fileName: 'userModel.xlsx'
+    },
+    responseType: 'blob'
+  })
+}
+
+// 访客导出
+export function userExport(data) {
+  return request({
+    baseURL,
+    url: '/user/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 新增
+export function addUser(data) {
+  return request({
+    baseURL,
+    url: 'user/addUser',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateUser(data) {
+  return request({
+    baseURL,
+    url: 'user/updateUser',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delUser(data) {
+  return request({
+    baseURL,
+    url: 'user/delUser',
+    method: 'post',
+    data
+  })
+}
+
+// 访客列表
+export function getApplyList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `visitor/getApplyList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 访客导出
+export function visitorExport(data) {
+  return request({
+    baseURL,
+    url: '/visitor/exportApplyList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 6c81d9b..a29418b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,9 @@
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
   { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
+  // { path: '/messageList', component: () => import('@/views/backstage/messageList'), hidden: true },
+  // { path: '/personList', component: () => import('@/views/backstage/personList'), hidden: true },
+  // { path: '/visitList', component: () => import('@/views/backstage/visitList'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 9292a60..907a6ea 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -15,7 +15,7 @@
         path: '/caseList',
         name: 'CaseList',
         component: () => import('@/views/case/caseList'),
-        meta: { title: '安防事件管理', icon: ''}
+        meta: { title: '安防事件管理', icon: '' }
       },
       {
         path: '/caseLevelList',
@@ -263,6 +263,36 @@
         meta: { title: '能源数据', icon: '' }
       }
     ]
+  },
+  {
+    path: 'backstage',
+    component: Layout,
+    redirect: '/backstage',
+    name: 'Backstage',
+    meta: {
+      title: '',
+      icon: 'icon-config' // 图标
+    },
+    children: [
+      {
+        path: '/messageList',
+        name: 'MessageList',
+        component: () => import('@/views/backstage/messageList'),
+        meta: { title: '消息后台', icon: '' }
+      },
+      {
+        path: '/personList',
+        name: 'PersonList',
+        component: () => import('@/views/backstage/personList'),
+        meta: { title: '人员管理后台', icon: '' }
+      },
+      {
+        path: '/visitAdmin',
+        name: 'VisitList',
+        component: () => import('@/views/backstage/visitList'),
+        meta: { title: '访客申请后台', icon: '' }
+      }
+    ]
   }
   // {
   //   path: 'security',
diff --git a/src/views/backstage/messageList.vue b/src/views/backstage/messageList.vue
new file mode 100644
index 0000000..b6ae4ce
--- /dev/null
+++ b/src/views/backstage/messageList.vue
@@ -0,0 +1,250 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.id" size="small" placeholder="请输入消息编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.messageId" size="small" placeholder="请输入访客申请编号" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="发送状态" style="width: 200px" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item >
+        <el-date-picker
+          v-model="listQuery.createTime"
+          style="width: 100%"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择发送时间"
+        />
+      </search-item>
+      <br>
+      <search-item>
+        <el-input v-model.trim="listQuery.account" size="small" placeholder="请输入接收人证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.name" size="small" placeholder="请输入接收人姓名" />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.createEndTime"
+          style="width:200px"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择接收时间"
+        />
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
+          导出
+        </el-button>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import { GetMessageList, messageExport } from '@/api/minipro'
+export default {
+  name: 'MessageList',
+  data() {
+    return {
+      listQuery: {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      statusList: [
+        {
+          name: '发送成功',
+          value: '0'
+        },
+        {
+          name: '发送失败',
+          value: '1'
+        }
+      ],
+      columns: [
+        {
+          text: '消息编号',
+          value: 'id',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请编号',
+          value: 'messageId',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请状态',
+          value: 'visitorApplyStatus',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送状态',
+          value: 'status',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送时间',
+          value: 'createTime',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '接收人证件编号',
+          value: 'account',
+          align: 'center'
+        },
+        {
+          text: '接收人姓名',
+          value: 'name',
+          align: 'center',
+          width: 150
+        }
+        // {
+        //   text: '接收人时间',
+        //   value: 'createEndTime',
+        //   align: 'center',
+        //   width: 200
+        // }
+      ], // 显示列
+      list: [], // 列表数据
+      selectList: [], // 选中的数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      GetMessageList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        console.log(res)
+        if (res.code === 200) {
+          this.list = res.data.rows
+          this.total = res.data.total
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    handleSelectionChange(select) {
+      this.selectList = select
+      console.log(this.selectList)
+    },
+    // 导出
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        messageExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `消息列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/backstage/personList.vue b/src/views/backstage/personList.vue
new file mode 100644
index 0000000..5206f7a
--- /dev/null
+++ b/src/views/backstage/personList.vue
@@ -0,0 +1,586 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.account" size="small" placeholder="请输入员工证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.name" size="small" placeholder="请输入员工姓名" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.documentType" size="small" placeholder="请选择证件类型" style="width: 200px" clearable>
+          <el-option
+            v-for="item in cardTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.phone" size="small" placeholder="请输入手机号" />
+      </search-item>
+      <br>
+      <search-item>
+        <el-select v-model="listQuery.logonState" size="small" placeholder="是否已在小程序注册" style="width: 190px" clearable >
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item label="员工类型" prop="staffType">
+        <el-select v-model="listQuery.staffType" size="small" placeholder="请选择员工类型" style="width: 190px" clearable>
+          <el-option
+            v-for="item in personList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roleName" size="small" placeholder="请选择员工角色" style="width: 190px" clearable >
+          <el-option
+            v-for="item in roleList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+      @selectionChange="handleSelectionChange"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-edit" @click="add()">
+          新增
+        </el-button>
+        <el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()">
+          删除
+        </el-button>
+        <el-button size="small" class="edit_btn" icon="el-icon-download" style="float:right" @click="exportFile()">
+          导出
+        </el-button>
+        <el-upload
+          :limit="1"
+          :show-file-list="false"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          action="string"
+          style="float:right; margin:0 3px;"
+          accept=".xls,.xlsx"
+        >
+          <el-button slot="trigger" size="small" icon="el-icon-folder-add">
+            批量导入
+          </el-button>
+        </el-upload>
+        <el-button size="small" class="edit_btn" style="margin-left:3px" @click="downTemplate()">
+          下载批量导入模板
+        </el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="80">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog
+      :title="`${editStatus ? '编辑' : '添加'}员工`"
+      :visible.sync="dialogVisible"
+      width="50%"
+      append-to-body
+      center
+      :close-on-click-modal="false"
+    >
+      <el-form ref="ruleForm" :rules="rules" :model="form" label-position="right" label-width="140px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="员工证件编号" prop="account">
+              <el-input v-model.trim="form.account" :disabled="editStatus" type="text" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工姓名" prop="name">
+              <el-input v-model.trim="form.name" :disabled="editStatus" type="text" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件类型" prop="documentType">
+              <el-select v-model="form.documentType" placeholder="必填">
+                <el-option
+                  v-for="item in cardTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model.trim="form.phone" type="text" placeholder="请输入手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工类型" prop="staffType">
+              <el-select v-model="form.staffType" placeholder="必填">
+                <el-option
+                  v-for="item in personList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工角色" prop="staffRole">
+              <el-radio-group
+                v-model="form.staffRole"
+                style="display:flex;margin-top: 14px;"
+                @change="changeRole"
+              >
+                <el-radio label="1319814546311985641">
+                  管理员
+                </el-radio><br>
+                <el-radio label="1397015476211346433">
+                  普通员工
+                </el-radio>
+                <span
+                  v-show="form.staffRole == '1319814546311985641'"
+                  class="el-form-item__error"
+                >具有查看物联网安全监测模块权限</span>
+                <span
+                  v-show="form.staffRole == '1397015476211346433'"
+                  class="el-form-item__error"
+                >不具有查看物联网安全监测模块权限</span>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" style="margin-top:20px">
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model.trim="form.remark" :rows="3" type="textarea" placeholder="备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          确定
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import { getUserList, addUser, updateUser, delUser, userExport, downloadTemplate, batchImportFire } from '@/api/minipro'
+export default {
+  name: 'PersonList',
+  data() {
+    return {
+      editStatus: false,
+      dialogVisible: false,
+      btnLoading: false,
+      listQuery: {
+        phone: '',
+        account: '',
+        name: '',
+        documentType: '',
+        roleName: '',
+        staffType: '',
+        logonState: '',
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      cardTypeList: [
+        {
+          name: '出入证',
+          value: '0'
+        },
+        {
+          name: '工作证',
+          value: '1'
+        }
+      ],
+      statusList: [
+        {
+          name: '是',
+          value: 0
+        },
+        {
+          name: '否',
+          value: 1
+        }
+      ],
+      personList: [
+        {
+          name: '正式员工',
+          value: '1556844891841564673'
+        },
+        {
+          name: '物业人员',
+          value: '1556844890952372225'
+        },
+        {
+          name: '运维人员',
+          value: '1556844891459883009'
+        }
+      ],
+      roleList: [
+        {
+          name: '管理员',
+          value: '1319814546311985641'
+        },
+        {
+          name: '普通员工',
+          value: '1397015476211346433'
+        }
+      ],
+      columns: [
+        {
+          text: '员工证件编号',
+          value: 'account',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '员工姓名',
+          value: 'name',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '证件类型',
+          value: 'documentTypeName',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '手机号',
+          value: 'phone',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '是否已在小程序注册',
+          value: 'logonState',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '员工类型',
+          value: 'staffTypeName',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '员工角色',
+          value: 'staffRoleName',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '备注',
+          value: 'remark',
+          align: 'center'
+        }
+      ], // 显示列
+      filename: '',
+      fileList: [], // 文件数据
+      list: [], // 列表数据
+      selectList: [], // 选中的数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: true
+        }
+      }, // 表格属性
+      form: {
+        account: '',
+        name: '',
+        documentType: '',
+        phone: '',
+        staffType: '',
+        staffRole: '',
+        remark: ''
+      },
+      rules: {
+        account: [
+          { required: true, message: '请输入证件编号', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入员工名称', trigger: 'blur' }
+        ],
+        documentType: [
+          { required: true, message: '请选择证件类型', trigger: 'blur' }
+        ],
+        staffType: [
+          { required: true, message: '请选择员工类型', trigger: 'blur' }
+        ],
+        staffRole: [
+          { required: true, message: '请选择员工角色', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      getUserList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        if (res.code === 200) {
+          this.list = res.data.rows
+          this.total = res.data.total
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        phone: '',
+        account: '',
+        name: '',
+        documentType: '',
+        roleName: '',
+        staffType: '',
+        logonState: '',
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    // 选中
+    handleSelectionChange(select) {
+      this.selectList = select
+      console.log(this.selectList)
+    },
+    // 新增
+    add() {
+      if (this.$refs.ruleForm) {
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      }
+      this.editStatus = false
+      this.dialogVisible = true
+      this.form = {
+        account: '',
+        name: '',
+        documentType: '',
+        phone: '',
+        staffType: '',
+        staffRole: '',
+        remark: ''
+      }
+    },
+    // 删除
+    batchDel() {
+      if (this.selectList.length === 0) {
+        this.$message.warning('暂未选中数据!')
+      } else {
+        const ids = this.selectList.map((item) => {
+          return item.id
+        })
+        delUser({ ids }).then(res => {
+          if (res.code === 200) {
+            this.$message.success('删除成功!')
+            this.fetchData()
+          }
+        })
+      }
+    },
+    // 修改
+    // eslint-disable-next-line vue/no-dupe-keys
+    edit(row) {
+      if (this.$refs.ruleForm) {
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      }
+      this.editStatus = true
+      this.dialogVisible = true
+      // const roleMap = {
+      //   '普通员工': '1397015476211346433',
+      //   '管理员': '1319814546311985641'
+      // }
+      this.form = row
+    },
+    changeRole(e) {
+      console.log(e)
+    },
+    // 确定
+    saveData() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          if (this.editStatus) {
+            updateUser({ ...this.form }).then(res => {
+              if (res.code === 200) {
+                this.$message.success('修改成功!')
+                this.dialogVisible = false
+                this.fetchData()
+              }
+            }).catch(_err => {
+              this.dialogVisible = false
+            })
+          } else {
+            addUser({ ...this.form }).then(res => {
+              console.log(res)
+              if (res.code === 200) {
+                this.$message.success('新增成功!')
+                this.dialogVisible = false
+                this.fetchData()
+              }
+            }).catch(_err => {
+              this.dialogVisible = false
+            })
+          }
+        } else {
+          this.$message.warning('请填写完整表单!')
+        }
+      })
+    },
+    // 取消
+    cancel() {
+      this.dialogVisible = false
+    },
+    uploadFile(param) {
+      // 判断文件大小是否符合要求
+      const _file = param.file
+      const isLt5M = _file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('请上传5M以下的excel文件')
+        return false
+      }
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '导入中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // 发起导入请求
+      batchImportFire(_file).then(res => {
+        loading.close() // 关闭加载动画
+        if (res.code === 200) {
+          this.$message.success('导入成功')
+          this.fetchData(false)
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch(() => {
+        loading.close() // 关闭加载动画
+      })
+      this.fileList = []
+    },
+    // 下载模板
+    downTemplate() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '数据处理中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      downloadTemplate().then(res => {
+        loading.close() // 关闭加载动画
+        const blob = new Blob([res.data])
+        const downloadElement = document.createElement('a')
+        const href = window.URL.createObjectURL(blob) // 创建下载的链接
+        downloadElement.href = href
+        downloadElement.download = '人员导入模板.xlsx' // 下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() // 点击下载
+        document.body.removeChild(downloadElement) // 下载完成移除元素
+        window.URL.revokeObjectURL(href) // 释放blob对象
+      }).catch((res) => {
+        loading.close()
+        this.$message.error(res.message)
+      })
+    },
+    // 导出
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        userExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `人员管理列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/backstage/visitList.vue b/src/views/backstage/visitList.vue
new file mode 100644
index 0000000..08ff78e
--- /dev/null
+++ b/src/views/backstage/visitList.vue
@@ -0,0 +1,321 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.applyNo" size="small" placeholder="申请单号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.visitorName" size="small" placeholder="访客姓名" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.visitReason" size="small" placeholder="访问目的" style="width: 190px" clearable>
+          <el-option
+            v-for="item in visitReasonList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.visitPosition" size="small" placeholder="访问楼栋" style="width: 190px" clearable>
+          <el-option
+            v-for="item in positionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.timeRange"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          start-placeholder="访问开始日期"
+          end-placeholder="访问结束日期"
+          size="small"
+          @change="handleTimeRange"
+        />
+      </search-item>
+      <br>
+      <search-item>
+        <el-input v-model.trim="listQuery.staffCode" size="small" placeholder="请输入申请者证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.staffName" size="small" placeholder="请输入申请者姓名" />
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
+          导出
+        </el-button>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import { getApplyList, visitorExport } from '@/api/minipro'
+export default {
+  name: 'VisitList',
+  data() {
+    return {
+      listQuery: {
+        applyNo: '',
+        visitorName: '',
+        visitReason: '',
+        visitPosition: '',
+        inTime: '',
+        outTime: '',
+        staffCode: '',
+        staffName: '',
+        timeRange: [],
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      visitReasonList: [
+        {
+          name: '商务会议',
+          value: '1556848929681248258'
+        },
+        {
+          name: '安装维修',
+          value: '1556848930381697025'
+        },
+        {
+          name: '商务洽谈',
+          value: '1556848930889207809'
+        },
+        {
+          name: '节目参演',
+          value: '1592417639036743683'
+        },
+        {
+          name: '会议拜访',
+          value: '1592417639036743684'
+        },
+        {
+          name: '工程维保',
+          value: '1592417639036743685'
+        },
+        {
+          name: '其他事宜',
+          value: '1592417639036743686'
+        }
+      ],
+      positionList: [
+        {
+          name: '一期主楼',
+          value: '1556848151176482817'
+        },
+        {
+          name: '二期主楼',
+          value: '1556848151621079042'
+        },
+        {
+          name: '	录制楼',
+          value: '1556848152069869569'
+        },
+        {
+          name: '演播厅',
+          value: '15568481526444892171600'
+        },
+        {
+          name: '大院工作区',
+          value: '1556848152963256321'
+        }
+      ],
+      columns: [
+        {
+          text: '申请单号',
+          value: 'applyNo',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '访客姓名',
+          value: 'visitorName',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '访客身份证',
+          value: 'visitorIdCard',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '访客联系方式',
+          value: 'visitorPhone',
+          align: 'center',
+          width: 100
+        },
+        {
+          text: '访问目的',
+          value: 'visitReason',
+          align: 'center',
+          width: 100
+        },
+        {
+          text: '访问楼栋',
+          value: 'visitPosition',
+          align: 'center',
+          width: 100
+        },
+        {
+          text: '访问时间',
+          value: 'inTime',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '申请者证件编号',
+          value: 'staffCode',
+          align: 'center',
+          width: 140
+        },
+        {
+          text: '申请者姓名',
+          value: 'staffName',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '申请者联系方式',
+          value: 'staffPhone',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'visitorApplyStatus',
+          align: 'center',
+          width: 100
+        }
+      ],
+      list: [], // 列表数据
+      selectList: [], // 选中的数
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      getApplyList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        if (res.code === 200) {
+          this.list = res.data.records
+          this.total = parseInt(res.data.total)
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        applyNo: '',
+        visitorName: '',
+        visitReason: '',
+        visitPosition: '',
+        inTime: '',
+        outTime: '',
+        staffCode: '',
+        staffName: '',
+        timeRange: [],
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    // 处理时间
+    handleTimeRange(date) {
+      if (date) {
+        this.listQuery.inTime = date[0]
+        this.listQuery.outTime = date[1]
+      }
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    // 导出 visitorExport
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        visitorExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `访客申请列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>

diff --git a/src/api/minipro.js b/src/api/minipro.js
new file mode 100644
index 0000000..99c71f0
--- /dev/null
+++ b/src/api/minipro.js
@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+// 小程序后台管理相关接口
+const baseURL = 'https://visitor.gd.smartlog.work'
+
+// 消息列表
+export function GetMessageList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `message/messageList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 消息导出
+export function messageExport(data) {
+  return request({
+    baseURL,
+    url: '/message/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 用户列表
+export function getUserList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `user/getUserList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 人员导入
+export function batchImportFire(fileobj) {
+  const param = new FormData()
+  param.append('multipartFile', fileobj)
+  return request({
+    baseURL,
+    url: '/user/importList',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
+// 模板下载
+export function downloadTemplate(fileName) {
+  return request({
+    baseURL,
+    url: '/user/download',
+    method: 'get',
+    params: {
+      fileName: 'userModel.xlsx'
+    },
+    responseType: 'blob'
+  })
+}
+
+// 访客导出
+export function userExport(data) {
+  return request({
+    baseURL,
+    url: '/user/exportList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
+// 新增
+export function addUser(data) {
+  return request({
+    baseURL,
+    url: 'user/addUser',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateUser(data) {
+  return request({
+    baseURL,
+    url: 'user/updateUser',
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function delUser(data) {
+  return request({
+    baseURL,
+    url: 'user/delUser',
+    method: 'post',
+    data
+  })
+}
+
+// 访客列表
+export function getApplyList(data) {
+  const {
+    offset,
+    limit
+  } = data
+  return request({
+    baseURL,
+    url: `visitor/getApplyList?limit=${limit}&offset=${offset}`,
+    method: 'post',
+    data
+  })
+}
+
+// 访客导出
+export function visitorExport(data) {
+  return request({
+    baseURL,
+    url: '/visitor/exportApplyList',
+    method: 'post',
+    timeout: 120000,
+    data,
+    responseType: 'blob' // 这一步也很关键，一定要加上 responseType 值为 blob
+  })
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 6c81d9b..a29418b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,9 @@
   { path: '/bottom', component: () => import('@/views/popup/bottom'), hidden: true },
   { path: '/floor', component: () => import('@/views/popup/floor'), hidden: true },
   { path: '/board', component: () => import('@/views/popup/board'), hidden: true },
+  // { path: '/messageList', component: () => import('@/views/backstage/messageList'), hidden: true },
+  // { path: '/personList', component: () => import('@/views/backstage/personList'), hidden: true },
+  // { path: '/visitList', component: () => import('@/views/backstage/visitList'), hidden: true },
   { path: '/device/pop', component: () => import('@/views/popup/device'), hidden: true },
 
   { path: '/case/pop', component: () => import('@/views/popup/case'), hidden: true },
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 9292a60..907a6ea 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -15,7 +15,7 @@
         path: '/caseList',
         name: 'CaseList',
         component: () => import('@/views/case/caseList'),
-        meta: { title: '安防事件管理', icon: ''}
+        meta: { title: '安防事件管理', icon: '' }
       },
       {
         path: '/caseLevelList',
@@ -263,6 +263,36 @@
         meta: { title: '能源数据', icon: '' }
       }
     ]
+  },
+  {
+    path: 'backstage',
+    component: Layout,
+    redirect: '/backstage',
+    name: 'Backstage',
+    meta: {
+      title: '',
+      icon: 'icon-config' // 图标
+    },
+    children: [
+      {
+        path: '/messageList',
+        name: 'MessageList',
+        component: () => import('@/views/backstage/messageList'),
+        meta: { title: '消息后台', icon: '' }
+      },
+      {
+        path: '/personList',
+        name: 'PersonList',
+        component: () => import('@/views/backstage/personList'),
+        meta: { title: '人员管理后台', icon: '' }
+      },
+      {
+        path: '/visitAdmin',
+        name: 'VisitList',
+        component: () => import('@/views/backstage/visitList'),
+        meta: { title: '访客申请后台', icon: '' }
+      }
+    ]
   }
   // {
   //   path: 'security',
diff --git a/src/views/backstage/messageList.vue b/src/views/backstage/messageList.vue
new file mode 100644
index 0000000..b6ae4ce
--- /dev/null
+++ b/src/views/backstage/messageList.vue
@@ -0,0 +1,250 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.id" size="small" placeholder="请输入消息编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.messageId" size="small" placeholder="请输入访客申请编号" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="发送状态" style="width: 200px" clearable>
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item >
+        <el-date-picker
+          v-model="listQuery.createTime"
+          style="width: 100%"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择发送时间"
+        />
+      </search-item>
+      <br>
+      <search-item>
+        <el-input v-model.trim="listQuery.account" size="small" placeholder="请输入接收人证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.name" size="small" placeholder="请输入接收人姓名" />
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.createEndTime"
+          style="width:200px"
+          type="datetime"
+          size="small"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择接收时间"
+        />
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
+          导出
+        </el-button>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import { GetMessageList, messageExport } from '@/api/minipro'
+export default {
+  name: 'MessageList',
+  data() {
+    return {
+      listQuery: {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      statusList: [
+        {
+          name: '发送成功',
+          value: '0'
+        },
+        {
+          name: '发送失败',
+          value: '1'
+        }
+      ],
+      columns: [
+        {
+          text: '消息编号',
+          value: 'id',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请编号',
+          value: 'messageId',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '访客申请状态',
+          value: 'visitorApplyStatus',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送状态',
+          value: 'status',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '发送时间',
+          value: 'createTime',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '接收人证件编号',
+          value: 'account',
+          align: 'center'
+        },
+        {
+          text: '接收人姓名',
+          value: 'name',
+          align: 'center',
+          width: 150
+        }
+        // {
+        //   text: '接收人时间',
+        //   value: 'createEndTime',
+        //   align: 'center',
+        //   width: 200
+        // }
+      ], // 显示列
+      list: [], // 列表数据
+      selectList: [], // 选中的数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      GetMessageList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        console.log(res)
+        if (res.code === 200) {
+          this.list = res.data.rows
+          this.total = res.data.total
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        id: '',
+        messageId: '',
+        status: '',
+        visitorApplyStatus: '',
+        account: '',
+        name: '',
+        createTime: '',
+        createEndTime: '',
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    handleSelectionChange(select) {
+      this.selectList = select
+      console.log(this.selectList)
+    },
+    // 导出
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        messageExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `消息列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/backstage/personList.vue b/src/views/backstage/personList.vue
new file mode 100644
index 0000000..5206f7a
--- /dev/null
+++ b/src/views/backstage/personList.vue
@@ -0,0 +1,586 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.account" size="small" placeholder="请输入员工证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.name" size="small" placeholder="请输入员工姓名" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.documentType" size="small" placeholder="请选择证件类型" style="width: 200px" clearable>
+          <el-option
+            v-for="item in cardTypeList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.phone" size="small" placeholder="请输入手机号" />
+      </search-item>
+      <br>
+      <search-item>
+        <el-select v-model="listQuery.logonState" size="small" placeholder="是否已在小程序注册" style="width: 190px" clearable >
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item label="员工类型" prop="staffType">
+        <el-select v-model="listQuery.staffType" size="small" placeholder="请选择员工类型" style="width: 190px" clearable>
+          <el-option
+            v-for="item in personList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.roleName" size="small" placeholder="请选择员工角色" style="width: 190px" clearable >
+          <el-option
+            v-for="item in roleList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          />
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+      @selectionChange="handleSelectionChange"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-edit" @click="add()">
+          新增
+        </el-button>
+        <el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()">
+          删除
+        </el-button>
+        <el-button size="small" class="edit_btn" icon="el-icon-download" style="float:right" @click="exportFile()">
+          导出
+        </el-button>
+        <el-upload
+          :limit="1"
+          :show-file-list="false"
+          :http-request="uploadFile"
+          :file-list="fileList"
+          action="string"
+          style="float:right; margin:0 3px;"
+          accept=".xls,.xlsx"
+        >
+          <el-button slot="trigger" size="small" icon="el-icon-folder-add">
+            批量导入
+          </el-button>
+        </el-upload>
+        <el-button size="small" class="edit_btn" style="margin-left:3px" @click="downTemplate()">
+          下载批量导入模板
+        </el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="80">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+    <el-dialog
+      :title="`${editStatus ? '编辑' : '添加'}员工`"
+      :visible.sync="dialogVisible"
+      width="50%"
+      append-to-body
+      center
+      :close-on-click-modal="false"
+    >
+      <el-form ref="ruleForm" :rules="rules" :model="form" label-position="right" label-width="140px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="员工证件编号" prop="account">
+              <el-input v-model.trim="form.account" :disabled="editStatus" type="text" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工姓名" prop="name">
+              <el-input v-model.trim="form.name" :disabled="editStatus" type="text" placeholder="必填" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件类型" prop="documentType">
+              <el-select v-model="form.documentType" placeholder="必填">
+                <el-option
+                  v-for="item in cardTypeList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model.trim="form.phone" type="text" placeholder="请输入手机号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工类型" prop="staffType">
+              <el-select v-model="form.staffType" placeholder="必填">
+                <el-option
+                  v-for="item in personList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="员工角色" prop="staffRole">
+              <el-radio-group
+                v-model="form.staffRole"
+                style="display:flex;margin-top: 14px;"
+                @change="changeRole"
+              >
+                <el-radio label="1319814546311985641">
+                  管理员
+                </el-radio><br>
+                <el-radio label="1397015476211346433">
+                  普通员工
+                </el-radio>
+                <span
+                  v-show="form.staffRole == '1319814546311985641'"
+                  class="el-form-item__error"
+                >具有查看物联网安全监测模块权限</span>
+                <span
+                  v-show="form.staffRole == '1397015476211346433'"
+                  class="el-form-item__error"
+                >不具有查看物联网安全监测模块权限</span>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" style="margin-top:20px">
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model.trim="form.remark" :rows="3" type="textarea" placeholder="备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          确定
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </el-dialog>
+  </app-container>
+</template>
+
+<script>
+import { getUserList, addUser, updateUser, delUser, userExport, downloadTemplate, batchImportFire } from '@/api/minipro'
+export default {
+  name: 'PersonList',
+  data() {
+    return {
+      editStatus: false,
+      dialogVisible: false,
+      btnLoading: false,
+      listQuery: {
+        phone: '',
+        account: '',
+        name: '',
+        documentType: '',
+        roleName: '',
+        staffType: '',
+        logonState: '',
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      cardTypeList: [
+        {
+          name: '出入证',
+          value: '0'
+        },
+        {
+          name: '工作证',
+          value: '1'
+        }
+      ],
+      statusList: [
+        {
+          name: '是',
+          value: 0
+        },
+        {
+          name: '否',
+          value: 1
+        }
+      ],
+      personList: [
+        {
+          name: '正式员工',
+          value: '1556844891841564673'
+        },
+        {
+          name: '物业人员',
+          value: '1556844890952372225'
+        },
+        {
+          name: '运维人员',
+          value: '1556844891459883009'
+        }
+      ],
+      roleList: [
+        {
+          name: '管理员',
+          value: '1319814546311985641'
+        },
+        {
+          name: '普通员工',
+          value: '1397015476211346433'
+        }
+      ],
+      columns: [
+        {
+          text: '员工证件编号',
+          value: 'account',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '员工姓名',
+          value: 'name',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '证件类型',
+          value: 'documentTypeName',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '手机号',
+          value: 'phone',
+          align: 'center',
+          width: 200
+        },
+        {
+          text: '是否已在小程序注册',
+          value: 'logonState',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '员工类型',
+          value: 'staffTypeName',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '员工角色',
+          value: 'staffRoleName',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '备注',
+          value: 'remark',
+          align: 'center'
+        }
+      ], // 显示列
+      filename: '',
+      fileList: [], // 文件数据
+      list: [], // 列表数据
+      selectList: [], // 选中的数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: true
+        }
+      }, // 表格属性
+      form: {
+        account: '',
+        name: '',
+        documentType: '',
+        phone: '',
+        staffType: '',
+        staffRole: '',
+        remark: ''
+      },
+      rules: {
+        account: [
+          { required: true, message: '请输入证件编号', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入员工名称', trigger: 'blur' }
+        ],
+        documentType: [
+          { required: true, message: '请选择证件类型', trigger: 'blur' }
+        ],
+        staffType: [
+          { required: true, message: '请选择员工类型', trigger: 'blur' }
+        ],
+        staffRole: [
+          { required: true, message: '请选择员工角色', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      getUserList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        if (res.code === 200) {
+          this.list = res.data.rows
+          this.total = res.data.total
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        phone: '',
+        account: '',
+        name: '',
+        documentType: '',
+        roleName: '',
+        staffType: '',
+        logonState: '',
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    // 选中
+    handleSelectionChange(select) {
+      this.selectList = select
+      console.log(this.selectList)
+    },
+    // 新增
+    add() {
+      if (this.$refs.ruleForm) {
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      }
+      this.editStatus = false
+      this.dialogVisible = true
+      this.form = {
+        account: '',
+        name: '',
+        documentType: '',
+        phone: '',
+        staffType: '',
+        staffRole: '',
+        remark: ''
+      }
+    },
+    // 删除
+    batchDel() {
+      if (this.selectList.length === 0) {
+        this.$message.warning('暂未选中数据!')
+      } else {
+        const ids = this.selectList.map((item) => {
+          return item.id
+        })
+        delUser({ ids }).then(res => {
+          if (res.code === 200) {
+            this.$message.success('删除成功!')
+            this.fetchData()
+          }
+        })
+      }
+    },
+    // 修改
+    // eslint-disable-next-line vue/no-dupe-keys
+    edit(row) {
+      if (this.$refs.ruleForm) {
+        this.$nextTick(() => {
+          this.$refs.ruleForm.clearValidate()
+        })
+      }
+      this.editStatus = true
+      this.dialogVisible = true
+      // const roleMap = {
+      //   '普通员工': '1397015476211346433',
+      //   '管理员': '1319814546311985641'
+      // }
+      this.form = row
+    },
+    changeRole(e) {
+      console.log(e)
+    },
+    // 确定
+    saveData() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          if (this.editStatus) {
+            updateUser({ ...this.form }).then(res => {
+              if (res.code === 200) {
+                this.$message.success('修改成功!')
+                this.dialogVisible = false
+                this.fetchData()
+              }
+            }).catch(_err => {
+              this.dialogVisible = false
+            })
+          } else {
+            addUser({ ...this.form }).then(res => {
+              console.log(res)
+              if (res.code === 200) {
+                this.$message.success('新增成功!')
+                this.dialogVisible = false
+                this.fetchData()
+              }
+            }).catch(_err => {
+              this.dialogVisible = false
+            })
+          }
+        } else {
+          this.$message.warning('请填写完整表单!')
+        }
+      })
+    },
+    // 取消
+    cancel() {
+      this.dialogVisible = false
+    },
+    uploadFile(param) {
+      // 判断文件大小是否符合要求
+      const _file = param.file
+      const isLt5M = _file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('请上传5M以下的excel文件')
+        return false
+      }
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '导入中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      // 发起导入请求
+      batchImportFire(_file).then(res => {
+        loading.close() // 关闭加载动画
+        if (res.code === 200) {
+          this.$message.success('导入成功')
+          this.fetchData(false)
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch(() => {
+        loading.close() // 关闭加载动画
+      })
+      this.fileList = []
+    },
+    // 下载模板
+    downTemplate() {
+      // 全屏加载动画
+      const loading = this.$loading({
+        lock: true,
+        text: '数据处理中,请稍后...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      downloadTemplate().then(res => {
+        loading.close() // 关闭加载动画
+        const blob = new Blob([res.data])
+        const downloadElement = document.createElement('a')
+        const href = window.URL.createObjectURL(blob) // 创建下载的链接
+        downloadElement.href = href
+        downloadElement.download = '人员导入模板.xlsx' // 下载后文件名
+        document.body.appendChild(downloadElement)
+        downloadElement.click() // 点击下载
+        document.body.removeChild(downloadElement) // 下载完成移除元素
+        window.URL.revokeObjectURL(href) // 释放blob对象
+      }).catch((res) => {
+        loading.close()
+        this.$message.error(res.message)
+      })
+    },
+    // 导出
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        userExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `人员管理列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/backstage/visitList.vue b/src/views/backstage/visitList.vue
new file mode 100644
index 0000000..08ff78e
--- /dev/null
+++ b/src/views/backstage/visitList.vue
@@ -0,0 +1,321 @@
+<template>
+  <app-container>
+    <search-area
+      :need-clear="true"
+      :need-search-more="false"
+      type="seperate"
+      size="small"
+      search-more-type="default"
+      @search="fetchData(false)"
+      @clear="clearInput"
+    >
+      <search-item>
+        <el-input v-model.trim="listQuery.applyNo" size="small" placeholder="申请单号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.visitorName" size="small" placeholder="访客姓名" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.visitReason" size="small" placeholder="访问目的" style="width: 190px" clearable>
+          <el-option
+            v-for="item in visitReasonList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.visitPosition" size="small" placeholder="访问楼栋" style="width: 190px" clearable>
+          <el-option
+            v-for="item in positionList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="listQuery.timeRange"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          start-placeholder="访问开始日期"
+          end-placeholder="访问结束日期"
+          size="small"
+          @change="handleTimeRange"
+        />
+      </search-item>
+      <br>
+      <search-item>
+        <el-input v-model.trim="listQuery.staffCode" size="small" placeholder="请输入申请者证件编号" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.staffName" size="small" placeholder="请输入申请者姓名" />
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"
+    >
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-download" @click="exportFile()">
+          导出
+        </el-button>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import { getApplyList, visitorExport } from '@/api/minipro'
+export default {
+  name: 'VisitList',
+  data() {
+    return {
+      listQuery: {
+        applyNo: '',
+        visitorName: '',
+        visitReason: '',
+        visitPosition: '',
+        inTime: '',
+        outTime: '',
+        staffCode: '',
+        staffName: '',
+        timeRange: [],
+        offset: 1,
+        limit: 20
+      }, // 筛选条件
+      visitReasonList: [
+        {
+          name: '商务会议',
+          value: '1556848929681248258'
+        },
+        {
+          name: '安装维修',
+          value: '1556848930381697025'
+        },
+        {
+          name: '商务洽谈',
+          value: '1556848930889207809'
+        },
+        {
+          name: '节目参演',
+          value: '1592417639036743683'
+        },
+        {
+          name: '会议拜访',
+          value: '1592417639036743684'
+        },
+        {
+          name: '工程维保',
+          value: '1592417639036743685'
+        },
+        {
+          name: '其他事宜',
+          value: '1592417639036743686'
+        }
+      ],
+      positionList: [
+        {
+          name: '一期主楼',
+          value: '1556848151176482817'
+        },
+        {
+          name: '二期主楼',
+          value: '1556848151621079042'
+        },
+        {
+          name: '	录制楼',
+          value: '1556848152069869569'
+        },
+        {
+          name: '演播厅',
+          value: '15568481526444892171600'
+        },
+        {
+          name: '大院工作区',
+          value: '1556848152963256321'
+        }
+      ],
+      columns: [
+        {
+          text: '申请单号',
+          value: 'applyNo',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '访客姓名',
+          value: 'visitorName',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '访客身份证',
+          value: 'visitorIdCard',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '访客联系方式',
+          value: 'visitorPhone',
+          align: 'center',
+          width: 100
+        },
+        {
+          text: '访问目的',
+          value: 'visitReason',
+          align: 'center',
+          width: 100
+        },
+        {
+          text: '访问楼栋',
+          value: 'visitPosition',
+          align: 'center',
+          width: 100
+        },
+        {
+          text: '访问时间',
+          value: 'inTime',
+          align: 'center',
+          width: 150
+        },
+        {
+          text: '申请者证件编号',
+          value: 'staffCode',
+          align: 'center',
+          width: 140
+        },
+        {
+          text: '申请者姓名',
+          value: 'staffName',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '申请者联系方式',
+          value: 'staffPhone',
+          align: 'center',
+          width: 120
+        },
+        {
+          text: '备注',
+          value: 'remarks',
+          align: 'center'
+        },
+        {
+          text: '申请状态',
+          value: 'visitorApplyStatus',
+          align: 'center',
+          width: 100
+        }
+      ],
+      list: [], // 列表数据
+      selectList: [], // 选中的数
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false, // 是否需要刷新按钮
+          needCheckBox: false
+        }
+      } // 表格属性
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    // 获取
+    fetchData() {
+      this.listLoading = true
+      getApplyList({ ...this.listQuery }).then(res => {
+        this.listLoading = false
+        if (res.code === 200) {
+          this.list = res.data.records
+          this.total = parseInt(res.data.total)
+        }
+      }).catch(err => {
+        console.log(err)
+        this.listLoading = false
+      })
+    },
+    // 重置
+    clearInput() {
+      this.listQuery = {
+        applyNo: '',
+        visitorName: '',
+        visitReason: '',
+        visitPosition: '',
+        inTime: '',
+        outTime: '',
+        staffCode: '',
+        staffName: '',
+        timeRange: [],
+        offset: 1,
+        limit: 20
+      }
+      this.fetchData()
+    },
+    // 处理时间
+    handleTimeRange(date) {
+      if (date) {
+        this.listQuery.inTime = date[0]
+        this.listQuery.outTime = date[1]
+      }
+    },
+    changePage({ page, size }) {
+      this.listQuery.offset = page || this.listQuery.offset
+      this.listQuery.limit = size || this.listQuery.limit
+      this.fetchData()
+    },
+    // 导出 visitorExport
+    exportFile() {
+      if (this.list.length === 0) {
+        this.$message.warning('暂无数据导出!')
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: '数据处理中,请稍后...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        visitorExport({ ...this.listQuery }).then(res => {
+          loading.close() // 关闭加载动画
+          const blob = new Blob([res.data])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob) // 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = `访客申请列表.xlsx` // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click() // 点击下载
+          document.body.removeChild(downloadElement) // 下载完成移除元素
+          window.URL.revokeObjectURL(href) // 释放blob对象
+        }).catch((res) => {
+          loading.close()
+          this.$message.error(res.message)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index 668c370..eb229cc 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="wrap">
     <div class="header">
-      巡视人员轨迹处理
+      人员轨迹追踪
+      <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
     <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
       <el-row :gutter="20">
@@ -9,7 +10,7 @@
           <el-form-item label="人员信息" prop="personName" style="position:relative">
             <el-select
               v-model="listQuery.personName"
-              :value-key="staffCode"
+              value-key="personName"
               :loading="selectLoading"
               :remote-method="remoteMethod"
               clear
@@ -18,14 +19,13 @@
               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"
+                :value="item.staffCode"
               />
             </el-select>
           </el-form-item>
@@ -100,7 +100,6 @@
 <script>
 import { hikPic, userList } from '@/api/person'
 import { getCameraList } from '@/api/device'
-import { getDate } from '@/utils/calendarUtil'
 import moreSelect from './components/selectTree'
 import { repostSocket } from '@/api/common'
 
@@ -110,16 +109,7 @@
   data() {
     return {
       selectLoading: false,
-      personObj: {
-        personName: '',
-        personNo: '',
-        personPicture: '',
-        personType: '',
-        picUri: '',
-        serverIndexCode: '',
-        staffCode: '0',
-        gender: ''
-      },
+      personName: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -132,15 +122,6 @@
       },
       personNameList: [
         // {
-        //   "personName": "郑嘉辉",
-        //   "personNo": "TV11326",
-        //   "personPicture": "",
-        //   "personType": "",
-        //   "picUri": "",
-        //   "serverIndexCode": "",
-        //   "staffCode": ""
-        // },
-        // {
         //   "personName": "郑11",
         //   "personNo": "TV11326",
         //   "personPicture": "",
@@ -241,6 +222,18 @@
     this.handlePointTreeData() // 获取点位数据
   },
   methods: {
+    // 关闭面板
+    close() {
+      const params = {
+        type: 'trail',
+        message: 'close'
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+          console.log('close')
+        }
+      })
+    },
     // 获取下拉树形点位数据
     getSelectedValue(val) {
       this.listQuery.cameraIndexCodes = val.map(item => { return item.indexCode })
@@ -256,8 +249,18 @@
     },
     // 赋值select参数
     handlePerson(person) {
+      // this.personNameList.map(item => {
+      //   if (item.personName === this.listQuery.personName) {
+      //     this.listQuery.facePicUrl = item.personPicture
+      //     this.listQuery.gender = item.gender
+      //     return
+      //   }
+      // })
+
       this.personNameList.map(item => {
-        if (item.personName === this.listQuery.personName) {
+        if (item.staffCode === person) {
+          this.personName = item.personName
+          // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
           return
@@ -288,7 +291,7 @@
         this.selectLoading = false
       })
     },
-     // 搜索请求发起
+    // 搜索请求发起
     fetchData() {
       const loading = this.$loading({
         lock: true,
@@ -296,7 +299,9 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      hikPic(this.listQuery).then(response => {
+      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      console.log(postData)
+      hikPic(postData).then(response => {
         loading.close()
         if (response.code === 200) {
           // this.list = response.data
@@ -314,11 +319,13 @@
       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.listQuery.timeRange = [getDate(0, 'DATE') + ' 00:00:00', getDate(0, 'SECOND')]
+      this.listQuery.cameraIndexCodes = []
+      this.listQuery.startTime = ''
+      this.listQuery.endTime = ''
+      this.listQuery.minSimilarity = '50'
+      this.listQuery.timeRange = ['', '']
+      this.personName = ''
+      this.list = []
     },
     // 轨迹上墙
     onwall() {
@@ -338,6 +345,7 @@
     },
     // 搜索
     search() {
+      console.log(this.listQuery)
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
           this.fetchData()
@@ -634,4 +642,16 @@
     .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
       left:62% !important;
     }
+    .close-icon{
+      z-index: 100;
+      position: absolute;
+      top:2px;
+      right:2px;
+      color:white;
+      background: #fc2323cc;
+      width:25px;
+      height:25px;
+      border-radius: 5px;
+      padding:3px;
+    }
 </style>