From 195867bf8272989f843409e9ab57dc50f74e0674 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Tue, 16 Sep 2025 16:48:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E8=84=B8=E8=AF=86=E5=88=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/faceRecognition/index.js              |  11 +-
 src/assets/images/user.jpg                    | Bin 3016 -> 6375 bytes
 src/assets/images/user2.jpg                   | Bin 0 -> 3016 bytes
 src/views/faceRecognition/faceRecLog.vue      | 168 ++++---
 .../faceRecognition/module/faceSearch.vue     | 157 +++++--
 .../faceRecognition/module/selfRegister.vue   |  44 +-
 .../faceRecognition/personInfoManage.vue      |  37 +-
 src/views/faceRecognition/personRegister.vue  | 438 ++++++++++++++++++
 8 files changed, 725 insertions(+), 130 deletions(-)
 create mode 100644 src/assets/images/user2.jpg
 create mode 100644 src/views/faceRecognition/personRegister.vue

diff --git a/src/api/faceRecognition/index.js b/src/api/faceRecognition/index.js
index 9af460d..89b2e93 100644
--- a/src/api/faceRecognition/index.js
+++ b/src/api/faceRecognition/index.js
@@ -59,6 +59,14 @@ export function FetchBatchSavePersonInfos(data) {
   })
 }
 
+// 人脸识别日志操作类别列表
+export function FetchSnapshotOperation(params) {
+  return request({
+    url: 'api/person/getSnapshotOperation' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
 export default {
   add,
   edit,
@@ -66,5 +74,6 @@ export default {
   FetchPersonInfoById,
   FetchChangePersonInfo,
   FetchFindPersonFace,
-  FetchBatchSavePersonInfos
+  FetchBatchSavePersonInfos,
+  FetchSnapshotOperation
 }
diff --git a/src/assets/images/user.jpg b/src/assets/images/user.jpg
index de4712360e87d55d6565f64e0a03cc9c2f88fe6f..8e38b99c1ed3cde75574508f37337f0fcf232590 100644
GIT binary patch
delta 4935
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
Aw*UYD

delta 2167
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
SLYI9kQ?BBdNCDf+hyM*k$?vQH

diff --git a/src/assets/images/user2.jpg b/src/assets/images/user2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..de4712360e87d55d6565f64e0a03cc9c2f88fe6f
GIT binary patch
literal 3016
zcmc&zX;f3!7QP`6C?XO8sem;GfeMBUWR}2FV=UBw%ug)POYQ|z$UqWif!9f2ManBs
zp~%oGLs5}}K$Njo2BB&TsDOZ!QIScoWso87f?)f@)%E_peb>3`oPGB2ef#XK>Qwy(
z=sEEmc>qcc03hT8RO0}a8zu;j0#JZD004G~svmvkghC-@6NzHE4G2jBU>ku%M2rNb
zM6wNu2-rD9N<l#|tiT1pK|(PHKUGzS#|a@0-kZiJ@udgh6T<hRWw3j+vxgu$Sipkt
z4)!>^NOq)1DuNXtE>aXCma`){__g3{WWTB=;&E#xieL_Y|7up;Klw*-2PHBXN3)?5
z1Y{}`$6(oz=~R*}eJ_qeBD07jCXsAQAd%T5I-AD8tqUH>CW8XmZd~4aF66|)uak<1
zh_H#UwUNkzh-4NEi9sP!C<MfUAdeC&z(|5vZnhDD3(EyEp;RH1h;geC!2n5^f`dnp
zzM>$K^7*d=zp+{((JHSsYq`P={u9O<t>qq3Qkdul%Oznl0gRZNZ8#&f`};(zh6ozA
zi%f_-3K+tb2*O0LSmDU!;E@{}NC>eh3=oEyFi4=#DIkGHqCx~_pa3E;Xml2dMW#X&
zkhu}(P5!pDLliEZ$7FITG%}e-Vv-IXWKtQ7L%ah>C8_icUq`WA0g46iMs6XJd)=4u
zx4!IyG8j}yWF8Vp$VL|&Jt0v@<R>Ij90h4V+`HaFF(iqQ?^%7LSCqN1Oc)MBJefp<
zTPreK_yzzpW`F=f7!s&ZAe9gZQDFi|W`YC(1B6&4Dve1IK=^fk=r6^4)uf09AtBws
z!luHuG!~W0B2WUEFo8j*G6?}JGKmlXLv$vcWJ_WMf_NeVk+|A7f9azQ71Erm+t*Wp
z9A3{AEJlV&hD?oW63|_n1pxXHnNF0d8~6;ssH>}MsADuVFmGXywMh$u(b}Y=t-VQG
zTSrf4P4skhx9Dxr)zQ~CFwoaGH8C+U-T7KjnwpxMbvD1Pr}wt8A=c3N^~L|XQT+&D
zwSaE{F&c#h)UYTt7Nx2OG62-NAV^;cMgy&mQqx4#02*0;iiR3;fzboh)KF-Y23ku?
z^VJ;+(PK3*TX&K7gZi#t;X^<EuH>eff#&m8iY)npt>C~XrS2&nhFBD!hL|GZHP)jd
zC#?D|^4913UG)t#z^}f;Q%Y{Sg?>DJz-+hb5uk%cJg{gi-~g1{x6XX~Cz8M2p|9H0
zdHhRPq6@;3D)kal=FCj|tc~wHoh?7_{FSkiJa1`MsqLKppjcKabdcR2P~HH)T=os?
z9L|2S_ulr~C1A&1?-1{pyu!MEf1_XFr1&$vFXO!!T~M)nn``RsLF(YUHKsnT`QhAW
z!|8D@|9Axkqcj~{FnK7ss5#o|ms~qR8+ExsWc((ZRFY3s&do6<W?!6p6k#o2!2H~3
z9TVQc6}Ke);a79UzbEZv-tZq=r$wb=%d0PP!-p=WgdV}RzxVK1=VICjX1pfE)9Ptj
z$Oi&nX?yc8<%{<c0v-+Yi{l^1^D>5dph43d%jT%;yO7rt??R94ga>C8ajvDccex_^
zf?zzGQ<XO~DIdtGHO|_nNv==5P`CL;$2%+ct}oIi$4-xS%7fE{665fN_b(oaNq?@C
zWNdOkTcRmFN78@qb#L=)8V_!s-!=^;JS3RrSz562%CaS_l7FpHMlEl$X==Eh=;>A&
zp;Kf~FmNT~p-ctf=e_Uj&yCJ}VLRWUd=T(r2>f?ai`$ZWaIvD#DqjVBnO+dqtOC9`
zd~>NZ*zMdLb+F0Sbb(1vufCJvVlibg($(2D`=Kb7>UnmVb*wG7=VE6Y|3vcSB(oyB
z@3{A+r9j`9tclCw3~B4cV9dbK^{#zhV;(^?-Ezn)%e8~Ac%FLPhx$?P#Ijw(DB*m_
z%1OS>7hdrAVp*2$=<Qn-u5P|}8?M)!{6^q3+|=~-cf?~&ai#;FOHIa!-AMye_Yc3n
z>+P2r;Y<3_%(|YOM^2rOL*Y#K?xmm3&6K2=LZ4wpyVvMP&t?pY$3FL{66||+HZ3KC
zcjZMM!Qri-Gqmc%jfOkFiQqr!Z!f;7oky)6ChUCaSljMj(LNoqn7Z7$6LVO%cTcyn
zrKr}|;J6V#CAQVAowrn(eE(Tre`b2VS!Sqwe5QfI{l%hqPk&XW()yazdg;)1N;tFO
z>h~?arQ@-qwU2L|52`ERdbQ`?iW>_O7nVoXmqngy2ygImo~Ueg&GWUYaSuIpiC<%P
z+;MlJN$;J&^d@J!;}z+a2K=d8pBOn<9gFJP?&h;^{OgPu_W9^-q3!u4{#s7W;>$<o
zugnjBIjMQ0!@jev_-IGhXyI~5N@XI$GiQf`C#QN$Sr+-xX9V-LI_P#rRG+M*7zO9w
z?kbpUcKG3^Kb~D_I!nnbOV82B8R1b%t9LXiA9$n`Hb)4}JGR8vJI-DnrRTnIn=>9W
zEF*=BcU4W6NB`bP6DV^<<z;yV@lK8v;ggKcY3G#2INc-r-XBU7B-e?%SlJrn{Gz6J
zT0SiMJiL&9h^YQDto?~O+#{M|-wpCKjg+@h6L?AViG~}2Pg7-c#+D!Wm0YrNJyqLl
z5O*zb$B0gRB7DmCYDngU*76|OQ;{IhX=yvF0t!NQdYBiKET6snsr*Puk^8j|D_DzP
zU#Asao0-G^9Jf92fXsDzal-oa%+uy5%R9aGhhMJrc<k9>BK&4*`B(G$|Ev{4ZSKrS
z|J3=tvzu?$xqV;k<l7e3FlMxE3GAIYIm92?2R4ti*C`(y4~`x#ND~icNm$*%4c$`n
zy*?asOZLjPwpc4{+G!_0boUS57E0yz`+b4s)S^h<7h9HV##UBbmaZ+s{w_)L9m8+c
z#;SnSrG{FGWB#=nntyN3nBDL5Dj+e=<>aCY*t1X^zHNbFte7mk+xR%ib9e4bHk6y4
zwOm8EVDUr+*o%a}6@9ugUsjiZ&YCJ4^7VUg`a;94=wt1RHuaSr-l;}l??iXhm9Xv^
zrQ~u-Y_>(Tb<0+m`+SWiI?t##NkP0It_qGln(3EF6@1ii(Q#<DB0UQfeS9}OtH}_Y
z(Z=^J_HvHKMH9~uhs=g%7YCJIdpw$I@&*fbvuk(O%kAg3aDLi4@ig&=WdHigni2ad
z4%4UZaBb4&>ks?9JEvE+l*dj6`rJ;QIGTCCF1h^j!Y>@>CzjfcS=I1V!Of(^0>3^?
z-15DwGP@nwb+-h<w#inWPs}dEMeET8-9)8Q$T`OR**SK$q}^FB$*N!t`v2|cpz8WB
D9qX(`

literal 0
HcmV?d00001

diff --git a/src/views/faceRecognition/faceRecLog.vue b/src/views/faceRecognition/faceRecLog.vue
index 45ac316..c0f42c3 100644
--- a/src/views/faceRecognition/faceRecLog.vue
+++ b/src/views/faceRecognition/faceRecLog.vue
@@ -4,7 +4,7 @@
     <div class="head-container">
       <div class="head-search" style="align-items: center;">
         <!-- 搜索 -->
-        <el-select v-model="query.status" clearable size="small" placeholder="用户类型" class="filter-item" style="width: 120px;" @change="crud.toQuery">
+        <el-select v-model="query.personType" clearable size="small" placeholder="用户类型" class="filter-item" style="width: 140px;" @change="crud.toQuery">
           <i slot="prefix" class="iconfont icon-zhuangtai" />
           <el-option v-for="item in userTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
         </el-select>
@@ -27,17 +27,20 @@
             />
           </el-select>
         </el-input>
-        <el-select v-model="query.status" clearable size="small" placeholder="操作类型" class="filter-item" style="width: 150px;" @change="crud.toQuery">
+        <el-select v-model="query.snapshotOperation" clearable size="small" placeholder="操作类型" class="filter-item" style="width: 150px;" @change="crud.toQuery">
           <i slot="prefix" class="iconfont icon-zhuangtai" />
           <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
         </el-select>
         <date-range-picker v-model="blurryTime" class="date-item" />
-        <rrOperation />
+        <rrOperation>
+          <template v-slot:right>
+            <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
+          </template>
+        </rrOperation>
       </div>
       <crudOperation :permission="permission">
         <template v-slot:right>
-          <!-- :disabled="crud.selections.length === 0" -->
-          <el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)">
+          <el-button :loading="crud.downloadLoading" size="mini" @click="doExport">
             <i class="iconfont icon-daochu" />
             导出
           </el-button>
@@ -49,14 +52,35 @@
       <span class="left-bottom-line" />
       <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 330px)" :data="crud.data" @selection-change="crud.selectionChangeHandler">
         <el-table-column type="index" label="序号" width="55" />
-        <el-table-column prop="name" label="操作者（读者证号/读者姓名）" />
-        <el-table-column prop="name" label="用户类型" />
-        <el-table-column prop="code" label="操作设备（设备编号/设备名称）" />
-        <el-table-column prop="type" label="所属机构（机构编号/机构名称）" />
-        <el-table-column prop="cardNum" label="操作类型" />
-        <el-table-column :show-overflow-tooltip="true" prop="createTime" label="操作时间">
+        <el-table-column prop="personName" label="操作者（读者证号/读者姓名）">
+          <template slot-scope="scope">
+            <div v-if="scope.row.barcode && scope.row.personName">{{ scope.row.barcode }} / {{ scope.row.personName }}</div>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="personType" label="用户类型" width="120">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.personType === 0">普通用户</el-tag>
+            <el-tag v-if="scope.row.personType === 1" type="success">VIP用户</el-tag>
+            <el-tag v-if="scope.row.personType === 2" type="info">黑名单用户</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="deviceName" label="操作设备（设备编号/设备名称）">
+          <template slot-scope="scope">
+            <div v-if="scope.row.deviveCode && scope.row.deviceName">{{ scope.row.deviveCode }} / {{ scope.row.deviceName }}</div>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="fondsName" label="所属机构（机构编号/机构名称）">
+          <template slot-scope="scope">
+            <div v-if="scope.row.libcode && scope.row.fondsName">{{ scope.row.libcode }} / {{ scope.row.fondsName }}</div>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="snapshotOperation" label="操作类型" />
+        <el-table-column :show-overflow-tooltip="true" prop="snapshotTime" label="操作时间">
           <template slot-scope="scope">
-            <div>{{ scope.row.createTime | parseTime }}</div>
+            <div>{{ scope.row.snapshotTime | parseTime }}</div>
           </template>
         </el-table-column>
       </el-table>
@@ -67,31 +91,30 @@
 </template>
 
 <script>
-import crudColumn from '@/api/inquiryMachine/column'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import crudFace, { FetchSnapshotOperation } from '@/api/faceRecognition/index'
+import CRUD, { presenter, header, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 import DateRangePicker from '@/components/DateRangePicker'
-// import { exportFile } from '@/utils/index'
-// import qs from 'qs'
+import { exportFile } from '@/utils/index'
+import qs from 'qs'
 import { mapGetters } from 'vuex'
 
-const defaultForm = { id: null, columnName: null, columnNo: null, columnType: 1, columnOrders: 999, columnContentType: 1, columnStatus: 1, columnRemarks: null }
 export default {
   name: 'PersonInfoManage',
   components: { pagination, crudOperation, rrOperation, DateRangePicker },
   cruds() {
-    return CRUD({ title: '人脸识别日志', url: 'api/fonds/initFondsList', crudMethod: { ...crudColumn }, optShow: {
+    return CRUD({ title: '人脸识别日志', url: 'api/person/initFaceRecognizeLog', crudMethod: { ...crudFace }, optShow: {
       add: false,
       edit: false,
       del: false,
-      reset: true,
+      reset: false,
       download: false,
       group: false
     }})
   },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
+  mixins: [presenter(), header(), crud()],
   data() {
     return {
       permission: {
@@ -100,21 +123,17 @@ export default {
         del: ['admin', 'column:del']
       },
       userTypeOptions: [
-        { key: '1', display_name: '普通用户' },
-        { key: '2', display_name: 'VIP用户' },
-        { key: '3', display_name: '黑名单用户' }
-      ],
-      enabledTypeOptions: [
-        { key: '1', display_name: '借书登录' },
-        { key: '2', display_name: '信息绑定登录' },
-        { key: '3', display_name: '查询续借登录' }
+        { key: 0, display_name: '普通用户' },
+        { key: 1, display_name: 'VIP用户' },
+        { key: 2, display_name: '黑名单用户' }
       ],
+      enabledTypeOptions: [],
       blurryTime: [],
       keyWord: '',
-      optionVal: 'username',
+      optionVal: 'personSearch',
       options: [
-        { value: 'username', label: '读者证号/读者姓名' },
-        { value: 'account', label: '设备名称/设备编号' }
+        { value: 'personSearch', label: '读者证号/读者姓名' },
+        { value: 'terminalSearch', label: '设备名称/设备编号' }
       ]
     }
   },
@@ -125,13 +144,13 @@ export default {
     ])
   },
   created() {
+    this.getSnapshotOperation()
   },
   mounted() {
   },
   methods: {
     [CRUD.HOOK.beforeRefresh]() {
-      console.log('this', this.keyWord)
-      console.log('this.optionVal', this.optionVal)
+      this.crud.query.libcode = this.user.fonds.fondsNo
       this.crud.query[this.optionVal] = this.keyWord
       if (this.blurryTime) {
         this.crud.query.startTime = this.blurryTime[0]
@@ -143,16 +162,15 @@ export default {
     },
     [CRUD.HOOK.afterRefresh]() {
     },
-    // 新增前
-    [CRUD.HOOK.beforeToAdd](crud, form) {
-    },
-    // 编辑前
-    [CRUD.HOOK.beforeToEdit](crud, form) {
-    },
-    // 提交前做的操作
-    [CRUD.HOOK.afterValidateCU](crud) {
-      console.log(crud.form)
-      return true
+    resetQuery() {
+      this.keyWord = ''
+      this.crud.query[this.optionVal] = this.keyWord
+      this.blurryTime = null
+      this.crud.query.startTime = null
+      this.crud.query.endTime = null
+      this.crud.query.personType = null
+      this.crud.query.snapshotOperation = null
+      this.crud.toQuery()
     },
     searchChange(val) {
       if (val) {
@@ -164,25 +182,48 @@ export default {
         })
       }
     },
-    doExport(data) {
-      console.log(data)
-      crud.downloadLoading = true
-      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
+    getSnapshotOperation() {
+      FetchSnapshotOperation({ 'libcode': this.user.fonds.fondsNo }).then(res => {
+        this.enabledTypeOptions = res.map(item => {
+          return {
+            key: item,
+            display_name: item
+          }
+        })
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    doExport() {
+      console.log('doExport', this.crud.page.total)
+      if (this.crud.page.total > 10000) {
+        this.handleExport('导出数据大于10000条，时间可能较长')
+      } else {
+        this.handleExport('此操作将导出所有数据')
+      }
+    },
+    handleExport(message) {
+      this.crud.downloadLoading = true
+      this.$confirm(message + '<span>你是否还要继续？</span>', '提示', {
         confirmButtonText: '继续',
         cancelButtonText: '取消',
         type: 'warning',
         dangerouslyUseHTMLString: true
       }).then(() => {
-        const ids = []
-        data.forEach(val => {
-          ids.push(val.id)
-        })
         const params = {
-          'ids': ids
+          'libcode': this.user.fonds.fondsNo,
+          'personType': this.crud.query.personType,
+          'snapshotOperation': this.crud.query.snapshotOperation,
+          'personSearch': this.optionVal === 'personSearch' ? this.keyWord : null,
+          'terminalSearch': this.optionVal === 'terminalSearch' ? this.keyWord : null,
+          'startTime': this.blurryTime.length !== 0 ? this.blurryTime[0].split(' ')[0] : null,
+          'endTime': this.blurryTime.length !== 0 ? this.blurryTime[1].split(' ')[0] : null
         }
-        console.log('params', params)
-        // exportFile(this.baseApi + '/api/log/downloadErrorLog?' + qs.stringify(params, { indices: false }))
+        console.log('exportFile', params)
+        exportFile(this.baseApi + '/api/person/downloadFaceRecognizeLog?' + qs.stringify(params, { indices: false, allowDots: true, skipNulls: false }))
+        this.crud.downloadLoading = false
       }).catch(() => {
+        console.log('取消')
       })
     }
   }
@@ -193,4 +234,23 @@ export default {
 ::v-deep .input-prepend .el-input__inner{
   padding-left: 160px;
 }
+
+::v-deep .el-tag{
+  &.el-tag--small{
+    color: #0348f3 !important;
+    background-color: #eef5fe !important;
+    border-color:  #eef5fe !important;
+  }
+  &.el-tag--success {
+    background-color: #e7faf0 !important;
+    border-color: #d0f5e0!important;
+    color: #13ce66!important;
+  }
+  &.el-tag--info {
+    background-color: #f4f4f5 !important;
+    border-color: #f4f4f5!important;
+    color: #909399!important;
+  }
+}
+
 </style>
diff --git a/src/views/faceRecognition/module/faceSearch.vue b/src/views/faceRecognition/module/faceSearch.vue
index d238373..ebf17e0 100644
--- a/src/views/faceRecognition/module/faceSearch.vue
+++ b/src/views/faceRecognition/module/faceSearch.vue
@@ -1,40 +1,44 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="人脸查询" :visible.sync="faceSearchVisible" :before-close="handleClose">
-    <div class="setting-dialog" style="display: flex; justify-content: flex-start;">
-      <div class="upload-img-input">
-        <input ref="fileInput" type="file" style="cursor: pointer;" @change="changeFile($event)">
-        <div class="upload-libImg">
-          <img :src="imageUrl || require('@/assets/images/user.jpg')" alt="人员照片">
-          <span>点击上传照片进行比对</span>
-        </div>
+  <!-- <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="人脸查询" :visible.sync="faceSearchVisible" :before-close="handleClose"> -->
+  <!-- <div :class="setting-dialog" style=""> -->
+  <div :class=" isDiaglogFaceSearch ? 'setting-dialog': 'app-container row-container'">
+    <div class="upload-img-input">
+      <input ref="fileInput" type="file" style="cursor: pointer;" @change="changeFile($event)">
+      <div class="upload-libImg">
+        <img :src="imageUrl || require('@/assets/images/user.jpg')" alt="人员照片">
+        <span>点击上传照片进行比对</span>
       </div>
-      <ul v-loading="isLoading" class="face-result-info">
-        <li><span>馆代码：</span>{{ searchPerson?.libcode || '-' }}</li>
-        <li><span>读者证号：</span>{{ searchPerson?.barcode || '-' }}</li>
-        <li><span>姓名：</span>{{ searchPerson?.personName || '-' }}</li>
-        <li><span>身份证号：</span>{{ searchPerson?.idCard || '-' }}</li>
-        <li><span>性别：</span>{{ searchPerson?.personSex !== undefined ? (searchPerson.personSex === 1 ? '男' : '女') : '-' }}</li>
-        <li><span>联系方式：</span>{{ searchPerson?.phone || '-' }}</li>
-        <li><span>类型：</span>
-          <template v-if="searchPerson?.personType !== undefined && searchPerson?.personType !== null">
-            <el-tag :type="getPersonTypeTagType(searchPerson.personType)">
-              {{ getPersonTypeLabel(searchPerson.personType) }}
-            </el-tag>
-          </template>
-          <template v-else>-</template>
-        </li>
-      </ul>
     </div>
-  </el-dialog>
+    <ul v-loading="isLoading" class="face-result-info">
+      <li><span class="person-label">馆代码：</span>{{ searchPerson?.libcode || '-' }}</li>
+      <li><span class="person-label">读者证号：</span>{{ searchPerson?.barcode || '-' }}</li>
+      <li><span class="person-label">姓名：</span>{{ searchPerson?.personName || '-' }}</li>
+      <li><span class="person-label">身份证号：</span>{{ searchPerson?.idCard || '-' }}</li>
+      <li><span class="person-label">性别：</span>{{ searchPerson?.personSex !== undefined ? (searchPerson.personSex === 1 ? '男' : '女') : '-' }}</li>
+      <li><span class="person-label">联系方式：</span>{{ searchPerson?.phone || '-' }}</li>
+      <li>
+        <span class="person-label">类型：</span>
+        <template v-if="searchPerson?.personType !== undefined && searchPerson?.personType !== null">
+          <el-tag :type="getPersonTypeTagType(searchPerson.personType)">
+            {{ getPersonTypeLabel(searchPerson.personType) }}
+          </el-tag>
+        </template>
+        <template v-else>-</template>
+      </li>
+    </ul>
+  </div>
+  <!-- </el-dialog> -->
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { uploadPerson } from '@/utils/upload'
 export default {
+  props: {
+    isDiaglogFaceSearch: { type: Boolean, default: false }
+  },
   data() {
     return {
-      faceSearchVisible: false,
       file: null,
       fileNames: '',
       imageUrl: null,
@@ -65,18 +69,16 @@ export default {
       const typeItem = typeMap.find(item => item.value === typeValue)
       return typeItem ? typeItem.label : '-'
     },
-    // 新增：获取标签类型（样式）
     getPersonTypeTagType(typeValue) {
-      // 根据不同类型返回不同的type属性值
       switch (typeValue) {
         case 0:
-          return '' // 普通用户 - 信息蓝
+          return ''
         case 1:
-          return 'success' // VIP用户 - 成功绿
+          return 'success'
         case 2:
-          return 'info' // 黑名单用户 - 危险红
+          return 'info'
         default:
-          return '' // 默认无样式
+          return ''
       }
     },
 
@@ -87,9 +89,7 @@ export default {
         this.file = e.target.files[0]
         this.fileNames = this.file.name
 
-        // 显示loading
         this.isLoading = true
-        // 清空之前的查询结果
         this.searchPerson = {}
 
         try {
@@ -100,7 +100,6 @@ export default {
             'libcode': this.user.fonds.fondsNo
           }
 
-          // 调用查询接口
           const res = await uploadPerson(this.baseApi + '/api/person/findPersonFace', this.file, params)
 
           if (res.data.code === 200) {
@@ -117,7 +116,6 @@ export default {
           console.error('人脸查询出错:', error)
           this.$message({ message: '查询过程出错，请重试', type: 'error', offset: 8 })
         } finally {
-          // 无论成功失败，都关闭loading
           this.isLoading = false
         }
       } else {
@@ -125,10 +123,8 @@ export default {
         this.imageUrl = null
       }
 
-      // 重置文件输入，允许重复选择同一文件
       e.target.value = ''
     },
-    // 将上传的图片转为base64
     getBase64(file) {
       const reader = new FileReader()
       reader.readAsDataURL(file)
@@ -137,18 +133,24 @@ export default {
           resolve(reader.result)
         }
       })
-    },
-    handleClose() {
-      this.faceSearchVisible = false
-      this.imageUrl = null
-      this.searchPerson = {}
-      this.btnLoading = false
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.setting-dialog{
+  display: flex;
+  justify-content: flex-start;
+}
+
+.row-container{
+  display: flex;
+  justify-content: flex-start;
+  height: calc(100vh - 145px);
+  padding: 40px 20px !important;
+}
+
 .upload-img-input{
   position: relative;
   width: 150px;
@@ -189,15 +191,11 @@ export default {
   margin-left: 20px;
   padding-left: 10px;
   border-left: 1px solid #EBEEF5;
-  display: flex;
-  flex-wrap: wrap;
   li{
-    width: 50%;
-    line-height: 20px;
     font-size: 14px;
     font-weight: bold;
     color: #0c0e1e;
-    span{
+    span.person-label{
       display: inline-block;
       width: 70px;
       text-align: right;
@@ -206,8 +204,69 @@ export default {
     }
   }
 }
+
+.setting-dialog{
+  .face-result-info{
+    display: flex;
+    flex-wrap: wrap;
+    li{
+      width: 50%;
+    }
+  }
+}
+
+.row-container{
+  .upload-img-input{
+    width: 300px;
+    height: 380px;
+    & input{
+      width: 300px;
+      height: 380px;
+    }
+    .upload-libImg{
+      width: 300px;
+      height: 380px;
+      & img{
+        height: 340px;
+      }
+    }
+  }
+
+  .face-result-info{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin-left: 30px;
+    padding-left: 50px;
+    li{
+      font-size: 16px;
+      line-height: 40px;
+      span.person-label{
+        width: 100px;
+      }
+    }
+  }
+}
 ::v-deep .el-tag{
   width: auto !important;
   margin: 0 !important;
+  border-color: #eef5fe !important;
+}
+::v-deep .el-tag{
+  &.el-tag--small{
+    color: #0348f3 !important;
+    background-color: #eef5fe !important;
+    border-color:  #eef5fe !important;
+  }
+  &.el-tag--success {
+    background-color: #e7faf0 !important;
+    border-color: #d0f5e0!important;
+    color: #13ce66!important;
+  }
+  &.el-tag--info {
+    background-color: #f4f4f5 !important;
+    border-color: #f4f4f5!important;
+    color: #909399!important;
+  }
 }
 </style>
diff --git a/src/views/faceRecognition/module/selfRegister.vue b/src/views/faceRecognition/module/selfRegister.vue
index 6511d9b..d73b4b9 100644
--- a/src/views/faceRecognition/module/selfRegister.vue
+++ b/src/views/faceRecognition/module/selfRegister.vue
@@ -1,37 +1,40 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="自助注册" :visible.sync="selfRegisterVisible">
-    <div class="setting-dialog">
-      <a
-        :href="link"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="external-link"
-      >
-        {{ link }}
-      </a>
-      <div class="qrcode-wrapper">
-        <div ref="qrcode" class="qrcode" />
-      </div>
+  <div :class=" isDialogFaceRegsiter ? 'setting-dialog': 'app-container row-container'">
+    <a
+      :href="link"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="external-link"
+    >
+      {{ link }}
+    </a>
+    <div class="qrcode-wrapper">
+      <div ref="qrcode" class="qrcode" />
     </div>
-  </el-dialog>
+  </div>
 </template>
 
 <script>
 import Qrcode from 'qrcodejs2'
 export default {
+  props: {
+    isDialogFaceRegsiter: { type: Boolean, default: false }
+  },
   data() {
     return {
-      selfRegisterVisible: false,
       link: 'http://192.168.99.72:8080/selfhelp/initReaderCheck.do?strLibcode=FTZN'
     }
   },
   mounted() {
+    this.generateQrcode()
   },
   methods: {
     generateQrcode() {
       const qrcodeRef = this.$refs.qrcode
       if (!qrcodeRef) return
 
+      qrcodeRef.innerHTML = ''
+
       new Qrcode(qrcodeRef, {
         text: this.link,
         width: 200,
@@ -40,10 +43,6 @@ export default {
         colorLight: '#fff',
         correctLevel: Qrcode.CorrectLevel.L
       })
-    },
-    open() {
-      this.selfRegisterVisible = true
-      this.$nextTick(() => this.generateQrcode())
     }
   }
 }
@@ -69,4 +68,11 @@ export default {
   padding: 20px;
 }
 
+.row-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: calc(100vh - 145px);
+  padding: 40px 20px !important;
+}
 </style>
diff --git a/src/views/faceRecognition/personInfoManage.vue b/src/views/faceRecognition/personInfoManage.vue
index 8f17ee3..bc9716a 100644
--- a/src/views/faceRecognition/personInfoManage.vue
+++ b/src/views/faceRecognition/personInfoManage.vue
@@ -104,7 +104,7 @@
         <el-table-column prop="personPhotoUrl" label="已存照片" align="center">
           <template slot-scope="scope">
             <!-- <img v-if="scope.row.personPhotoUrl === '' || scope.row.personPhotoUrl === null" src="~@/assets/images/cover-bg.png" alt="" style="display:block; height: 60px;">
-            <img v-else :src="baseApi + '/api/fileRelevant/getFaceImg?imgId=' + scope.row.personPhotoUrl" alt="" style="display:block; height: 60px;"> -->
+            <img v-else :src="baseApi + '/api/fileRelevant/getImg?imgType=3&imgId=' + scope.row.personPhotoUrl" alt="" style="display:block; height: 60px;"> -->
             <span v-if="scope.row.personPhotoUrl === '' || scope.row.personPhotoUrl === null">否</span>
             <span v-else>是</span>
           </template>
@@ -132,9 +132,16 @@
       <pagination v-if="crud.data.length !== 0" />
     </div>
 
-    <FaceSearch ref="faceSearchRefs" />
-    <SelfRegister ref="selfRegisterRefs" />
+    <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="人脸查询" :visible.sync="faceSearchVisible" :before-close="handleClose">
+      <FaceSearch ref="faceSearchRefs" :is-diaglog-face-search="true" />
+    </el-dialog>
+
     <BatchImport ref="batchImportRefs" @refresh="updatePerson" />
+
+    <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="自助注册" :visible.sync="selfRegisterVisible">
+      <SelfRegister ref="selfRegisterRefs" :is-dialog-face-regsiter="true" />
+    </el-dialog>
+
   </div>
 </template>
 
@@ -196,7 +203,9 @@ export default {
       file: null,
       fileNames: '',
       filePath: '',
-      imageUrl: null
+      imageUrl: null,
+      selfRegisterVisible: false,
+      faceSearchVisible: false
     }
   },
   computed: {
@@ -243,7 +252,7 @@ export default {
             this.$set(crud.form, key, res[key])
           })
           if (this.form.personPhotoUrl) {
-            this.imageUrl = this.baseApi + '/api/fileRelevant/getFaceImg?imgId=' + this.form.personPhotoUrl
+            this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=3&imgId=' + this.form.personPhotoUrl
           } else {
             this.imageUrl = require('@/assets/images/user.jpg')
           }
@@ -285,10 +294,16 @@ export default {
       }
     },
     handleFaceSearch() {
-      this.$refs.faceSearchRefs.faceSearchVisible = true
+      this.faceSearchVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.faceSearchRefs
+      // })
     },
     handleSelfRegister() {
-      this.$refs.selfRegisterRefs.open()
+      this.selfRegisterVisible = true
+      this.$nextTick(() => {
+        this.$refs.selfRegisterRefs.generateQrcode()
+      })
     },
     handleBatchImport() {
       this.$refs.batchImportRefs.batchImportVisible = true
@@ -370,6 +385,14 @@ export default {
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
+    },
+    handleClose() {
+      this.faceSearchVisible = false
+      if (this.$refs.faceSearchRefs) {
+        this.$refs.faceSearchRefs.imageUrl = null
+        this.$refs.faceSearchRefs.searchPerson = {}
+        this.$refs.faceSearchRefs.btnLoading = false
+      }
     }
   }
 }
diff --git a/src/views/faceRecognition/personRegister.vue b/src/views/faceRecognition/personRegister.vue
new file mode 100644
index 0000000..38f245c
--- /dev/null
+++ b/src/views/faceRecognition/personRegister.vue
@@ -0,0 +1,438 @@
+<template>
+  <div class="app-container row-container">
+    <div class="head-container">
+      <div class="head-search" style="align-items: center; ">
+        <el-select v-model="query.personType" clearable size="small" placeholder="用户类型" class="filter-item" style="width: 140px;" @change="crud.toQuery">
+          <i slot="prefix" class="iconfont icon-zhuangtai" />
+          <el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-input v-model="query.search" size="small" clearable placeholder="输入证号、姓名、身份证号搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 260px;" @keyup.enter.native="crud.toQuery" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission">
+        <template v-slot:middle>
+          <el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
+            <i class="iconfont icon-shanchu" />
+            删除
+          </el-button>
+        </template>
+        <template v-slot:right>
+          <el-button size="mini" @click="handleBatchImport">
+            <i class="iconfont icon-piliangchengjian" />
+            批量导入
+          </el-button>
+        </template>
+      </crudOperation>
+    </div>
+    <div class="container-wrap">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+        <span class="dialog-right-top" />
+        <span class="dialog-left-bottom" />
+        <div class="setting-dialog">
+          <div style="display: flex; justify-content: flex-start;">
+            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
+              <el-form-item label="馆代码" prop="libcode">
+                <el-input v-model="form.libcode" disabled placeholder="系统自动输入" />
+              </el-form-item>
+              <el-form-item label="读者证号" prop="barcode">
+                <el-input v-model="form.barcode" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item label="姓名" prop="personName">
+                <el-input v-model="form.personName" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item label="身份证号" prop="idCard">
+                <el-input v-model="form.idCard" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item label="联系方式" prop="phone">
+                <el-input v-model="form.phone" placeholder="请输入" />
+              </el-form-item>
+              <el-form-item label="性别" prop="personSex">
+                <el-radio-group v-model="form.personSex">
+                  <el-radio :label="1">男</el-radio>
+                  <el-radio :label="0">女</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="用户类型" prop="personType">
+                <el-select v-model="form.personType" placeholder="请选择">
+                  <el-option
+                    v-for="(item,index) in userTypeOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+            <div class="right-user-img">
+              <img :src="imageUrl || require('@/assets/images/user.jpg')" alt="人员照片">
+              <div class="upload-btn" style="margin: 0 0 10px 0;">
+                <input id="upFile" type="file" name="upFile" accept="image/*" @change="changeFile($event)">
+                <el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />选择上传照片</el-button>
+              </div>
+              <el-button type="primary"><i class="iconfont icon-yulan" />摄像头拍摄</el-button>
+            </div>
+          </div>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="crud.cancelCU">取消</el-button>
+            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 330px)" :data="crud.data" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler">
+        <el-table-column type="selection" align="center" width="55" />
+        <el-table-column type="index" label="序号" width="55" />
+        <el-table-column prop="personName" label="姓名" />
+        <el-table-column prop="personSex" label="性别" width="60">
+          <template slot-scope="scope">
+            <span>{{ scope.row.personSex === 1 ? '男' : '女' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="barcode" label="读者证号" />
+        <el-table-column prop="idCard" label="身份证号" />
+        <el-table-column prop="libcode" label="馆代码" width="100" />
+        <el-table-column prop="personPhotoUrl" label="已存照片" align="center">
+          <template slot-scope="scope">
+            <!-- <img v-if="scope.row.personPhotoUrl === '' || scope.row.personPhotoUrl === null" src="~@/assets/images/cover-bg.png" alt="" style="display:block; height: 60px;">
+            <img v-else :src="baseApi + '/api/fileRelevant/getImg?imgType=3&imgId=' + scope.row.personPhotoUrl" alt="" style="display:block; height: 60px;"> -->
+            <span v-if="scope.row.personPhotoUrl === '' || scope.row.personPhotoUrl === null">否</span>
+            <span v-else>是</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="personType" label="用户类型" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.personType === 0">普通用户</el-tag>
+            <el-tag v-if="scope.row.personType === 1" type="success">VIP用户</el-tag>
+            <el-tag v-if="scope.row.personType === 2" type="info">黑名单用户</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" prop="columnStatus" width="240">
+          <template slot-scope="scope">
+            <el-button :class="scope.row.personType === 2 ? 'remove-black-btn' : ''" size="mini" style="padding: 5px;" @click="addBlackOrVipUser(scope.row,0)">
+              <i class="iconfont icon-heimingdan" />
+              {{ scope.row.personType === 2 ? '移出黑名单' : '加入黑名单' }}
+            </el-button>
+            <el-button :class="scope.row.personType === 1 ? 'remove-vip-btn' : ''" size="mini" style="padding: 5px;" @click="addBlackOrVipUser(scope.row,1)">
+              <i class="iconfont icon-yooxi" />
+              {{ scope.row.personType === 1 ? '移出VIP' : '加入VIP' }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-if="crud.data.length !== 0" />
+    </div>
+
+    <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="人脸查询" :visible.sync="faceSearchVisible" :before-close="handleClose">
+      <FaceSearch ref="faceSearchRefs" :is-diaglog-face-search="true" />
+    </el-dialog>
+
+    <BatchImport ref="batchImportRefs" @refresh="updatePerson" />
+
+    <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="自助注册" :visible.sync="selfRegisterVisible">
+      <SelfRegister ref="selfRegisterRefs" :is-dialog-face-regsiter="true" />
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import crudFace, { FetchPersonInfoById, FetchChangePersonInfo } from '@/api/faceRecognition/index'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import FaceSearch from './module/faceSearch'
+import SelfRegister from './module/selfRegister'
+import BatchImport from './module/batchImport'
+// import { exportFile } from '@/utils/index'
+// import qs from 'qs'
+import { mapGetters } from 'vuex'
+import { upload } from '@/utils/upload'
+
+const defaultForm = { personId: null, libcode: null, barcode: null, personName: null, personPhotoUrl: null, idCard: null, phone: null, personSex: 1, personType: 0, personPhotoBase64: null }
+export default {
+  name: 'PersonInfoManage',
+  components: { pagination, crudOperation, rrOperation, FaceSearch, SelfRegister, BatchImport },
+  cruds() {
+    return CRUD({ title: '人员信息', idField: 'personId', url: 'api/person/initPersonInfo', crudMethod: { ...crudFace }, optShow: {
+      add: true,
+      edit: true,
+      del: false,
+      reset: true,
+      download: false,
+      group: false
+    }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'face:add'],
+        edit: ['admin', 'face:edit'],
+        del: ['admin', 'face:del']
+      },
+      userTypeOptions: [
+        { value: 0, label: '普通用户' },
+        { value: 1, label: 'VIP用户' },
+        { value: 2, label: '黑名单用户' }
+      ],
+      rules: {
+        libcode: [
+          { required: true, message: '馆代码不可为空', trigger: 'blur' }
+        ],
+        barcode: [
+          { required: true, message: '读者证号不可为空', trigger: 'blur' }
+        ],
+        personName: [
+          { required: true, message: '姓名不可为空', trigger: 'blur' }
+        ],
+        personType: [
+          { required: true, message: '请选择用户类型', trigger: 'change' }
+        ]
+      },
+      file: null,
+      fileNames: '',
+      filePath: '',
+      imageUrl: null,
+      selfRegisterVisible: false,
+      faceSearchVisible: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi',
+      'user'
+    ])
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    updatePerson() {
+      this.crud.refresh()
+    },
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.libcode = this.user.fonds.fondsNo
+    },
+    [CRUD.HOOK.afterRefresh]() {
+    },
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+      form.libcode = this.user.fonds.fondsNo
+    },
+    // 新增前
+    [CRUD.HOOK.beforeToAdd](crud, form) {
+    },
+    // 编辑前
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      this.imageUrl = null
+      const params = {
+        'id': form.personId
+      }
+      FetchPersonInfoById(params).then(res => {
+        if (res) {
+          // crud.form = { ...crud.form, ...res }
+
+          Object.keys(crud.form).forEach(key => {
+            this.$set(crud.form, key, null)
+          })
+
+          Object.keys(res).forEach(key => {
+            this.$set(crud.form, key, res[key])
+          })
+          if (this.form.personPhotoUrl) {
+            this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=3&imgId=' + this.form.personPhotoUrl
+          } else {
+            this.imageUrl = require('@/assets/images/user.jpg')
+          }
+        } else {
+          this.$message({ message: '获取数据失败', type: 'error', offset: 8 })
+        }
+      }).catch((err) => {
+        this.$message({ message: '获取数据失败', type: 'error', offset: 8 })
+        console.error(err)
+      })
+    },
+    // 提交前做的操作
+    [CRUD.HOOK.afterValidateCU](crud) {
+      if (crud.form.personPhotoUrl === '' || crud.form.personPhotoUrl === null) {
+        this.$message({ message: '请选择上传照片', type: 'error', offset: 8 })
+        return false
+      }
+      console.log(crud.form)
+      return true
+    },
+    async changeFile(e) {
+      const file = e.target.files[0]
+
+      if (file && file.type.startsWith('image/')) {
+        this.file = e.target.files[0]
+        this.fileNames = this.file.name
+
+        const fileBase64 = await this.getBase64(this.file)
+        this.imageUrl = fileBase64
+        upload(this.baseApi + '/api/fileRelevant/uploadFaceImg', this.file).then(res => {
+          console.log(res)
+          if (res.data.code === 200) {
+            this.form.personPhotoUrl = res.data.data
+          }
+        })
+      } else {
+        this.$message({ message: '只可上传图片', type: 'error', offset: 8 })
+        this.imageUrl = null
+      }
+    },
+    handleFaceSearch() {
+      this.faceSearchVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.faceSearchRefs
+      // })
+    },
+    handleSelfRegister() {
+      this.selfRegisterVisible = true
+      this.$nextTick(() => {
+        this.$refs.selfRegisterRefs.generateQrcode()
+      })
+    },
+    handleBatchImport() {
+      this.$refs.batchImportRefs.batchImportVisible = true
+    },
+    toDelete(datas) {
+      this.$confirm('此操作将删除当前所选' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        const ids = []
+        datas.forEach(val => {
+          ids.push(val.personId)
+        })
+        crudFace.del(ids).then(() => {
+          this.$message({ message: '删除成功', type: 'success', offset: 8 })
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err)
+        })
+      }).catch(() => {
+      })
+    },
+    addBlackOrVipUser(data, type) {
+      const message = type === 1 ? 'VIP' : '黑名单'
+      this.$confirm('此操作将所选用户加入 / 移出 ' + message + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        if (data.personType === 0 && type === 1) {
+          data.personType = 1
+        } else if (data.personType === 0 && type === 0) {
+          data.personType = 2
+        } else if (data.personType === 1 && type === 1) {
+          data.personType = 0
+        } else if (data.personType === 1 && type === 0) {
+          data.personType = 2
+        } else if (data.personType === 2 && type === 1) {
+          data.personType = 1
+        } else if (data.personType === 2 && type === 0) {
+          data.personType = 0
+        }
+        FetchChangePersonInfo(data).then(res => {
+          this.$message({ message: '修改成功', type: 'success', offset: 8 })
+        }).catch(() => {
+          this.$message({ message: '修改失败', type: 'error', offset: 8 })
+        })
+      }).catch(() => {
+        this.$message({ message: '已取消修改', offset: 8 })
+      })
+    },
+    getBase64(file) {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      return new Promise((resolve) => {
+        reader.onload = () => {
+          resolve(reader.result)
+        }
+      })
+    },
+    // 获取图片的分辨率
+    getImgPx(img) {
+      const image = new Image()
+      image.src = img
+      return new Promise((resolve) => {
+        image.onload = () => {
+          const width = image.width
+          const height = image.height
+          resolve({ width, height })
+        }
+      })
+    },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
+    handleClose() {
+      this.faceSearchVisible = false
+      if (this.$refs.faceSearchRefs) {
+        this.$refs.faceSearchRefs.imageUrl = null
+        this.$refs.faceSearchRefs.searchPerson = {}
+        this.$refs.faceSearchRefs.btnLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.face-search.el-button:hover,
+.face-search.el-button:focus,
+.face-search.el-button--info.is-plain:hover,
+.face-search.el-button--info.is-plain:focus{
+   background: #E8F2FF !important;
+}
+
+.right-user-img{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 30px;
+  border-left: 1px solid #E8E8E8;
+  img{
+    display: block;
+    width: 150px;
+    height: 200px;
+    margin: 20px 0;
+  }
+}
+
+::v-deep .el-tag{
+  &.el-tag--small{
+    color: #0348f3 !important;
+    background-color: #eef5fe !important;
+    border-color:  #eef5fe !important;
+  }
+  &.el-tag--success {
+    background-color: #e7faf0 !important;
+    border-color: #d0f5e0!important;
+    color: #13ce66!important;
+  }
+  &.el-tag--info {
+    background-color: #f4f4f5 !important;
+    border-color: #f4f4f5!important;
+    color: #909399!important;
+  }
+}
+
+.remove-black-btn,
+.remove-vip-btn{
+  border-color: #909399;
+  color: #909399;
+}
+</style>