From 310bcd1b90f634f3b216512b2c5c1978edf72c68 Mon Sep 17 00:00:00 2001 From: xuhuajiao <13476289682@163.com> Date: Thu, 18 Sep 2025 16:53:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=8A=A9=E6=B3=A8=E5=86=8Capi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/api/faceRecognition/index.js | 12 +- src/assets/styles/faceMobile.scss | 10 +- src/main.js | 6 + .../faceRecognition/personInfoManage.vue | 150 +++++++++++++++++- src/views/faceRegisterH5/error.vue | 5 +- src/views/faceRegisterH5/index.vue | 88 ++++++---- src/views/faceRegisterH5/registered.vue | 10 +- src/views/faceRegisterH5/selfRegister.vue | 107 ++++++++++--- src/views/faceRegisterH5/success.vue | 5 +- 10 files changed, 326 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index 804db2f..04cd0a5 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ "sortablejs": "1.8.4", "spark-md5": "^3.0.2", "v-viewer": "^1.6.4", + "vconsole": "^3.15.1", "vkbeautify": "^0.99.3", "vue": "^2.6.14", "vue-awesome-swiper": "^3.1.3", diff --git a/src/api/faceRecognition/index.js b/src/api/faceRecognition/index.js index d469555..7ba1e53 100644 --- a/src/api/faceRecognition/index.js +++ b/src/api/faceRecognition/index.js @@ -83,6 +83,15 @@ export function FetchCheckReader(params) { }) } +// 自助注册 - 编辑人员 +export function FetchEditReaderFace(data) { + return request({ + url: 'api/person/editReaderFace', + method: 'post', + data + }) +} + export default { add, edit, @@ -93,5 +102,6 @@ export default { FetchBatchSavePersonInfos, FetchSnapshotOperation, FetchInitReaderCheck, - FetchCheckReader + FetchCheckReader, + FetchEditReaderFace } diff --git a/src/assets/styles/faceMobile.scss b/src/assets/styles/faceMobile.scss index ab0b061..1c9cbfe 100644 --- a/src/assets/styles/faceMobile.scss +++ b/src/assets/styles/faceMobile.scss @@ -56,15 +56,23 @@ } .submit-btn{ + display: block; width: 200px; height: 80px; margin: 60px auto 0 auto; - padding-top: 20px; + padding: 0; color: #fff; font-size: 16px; background: url("~@/assets/images/faceH5/btnok.png") no-repeat center center; background-size: 100% 100%; text-align: center; + border: none; + line-height: 0; + ::v-deep span{ + display: inline-block !important; + height: 60px; + padding-top: 20px; + } } diff --git a/src/main.js b/src/main.js index 67eb966..d62eca7 100644 --- a/src/main.js +++ b/src/main.js @@ -33,6 +33,12 @@ import 'viewerjs/dist/viewer.css' import Print from 'vue-print-nb' +// import Vconsole from 'vconsole' + +// const vConsole = new Vconsole() + +// export default vConsole + // 加载用户主题 if (localStorage.getItem('themeValue')) { window.document.documentElement.setAttribute('data-theme', localStorage.getItem('themeValue')) diff --git a/src/views/faceRecognition/personInfoManage.vue b/src/views/faceRecognition/personInfoManage.vue index bc9716a..8f4b60a 100644 --- a/src/views/faceRecognition/personInfoManage.vue +++ b/src/views/faceRecognition/personInfoManage.vue @@ -80,7 +80,26 @@ 选择上传照片 - 摄像头拍摄 + + 摄像头拍摄 + + + +
+
@@ -205,7 +224,13 @@ export default { filePath: '', imageUrl: null, selfRegisterVisible: false, - faceSearchVisible: false + faceSearchVisible: false, + + // 摄像头相关状态 + showCamera: false, + stream: null, + videoElement: null, + canvasElement: null } }, computed: { @@ -214,6 +239,20 @@ export default { 'user' ]) }, + watch: { + // 监听摄像头显示状态变化 + showCamera(val) { + if (val) { + this.openCamera() + } else { + this.stopStream() + } + } + }, + beforeDestroy() { + // 组件销毁时确保停止流 + this.stopStream() + }, created() { }, mounted() { @@ -233,6 +272,12 @@ export default { }, // 新增前 [CRUD.HOOK.beforeToAdd](crud, form) { + this.imageUrl = null + Object.keys(crud.form).forEach(key => { + this.$set(crud.form, key, null) + }) + this.crud.form.personSex = 1 + this.crud.form.personType = 0 }, // 编辑前 [CRUD.HOOK.beforeToEdit](crud, form) { @@ -266,10 +311,10 @@ export default { }, // 提交前做的操作 [CRUD.HOOK.afterValidateCU](crud) { - if (crud.form.personPhotoUrl === '' || crud.form.personPhotoUrl === null) { - this.$message({ message: '请选择上传照片', type: 'error', offset: 8 }) - return false - } + // if (crud.form.personPhotoUrl === '' || crud.form.personPhotoUrl === null) { + // this.$message({ message: '请选择上传照片', type: 'error', offset: 8 }) + // return false + // } console.log(crud.form) return true }, @@ -393,6 +438,68 @@ export default { this.$refs.faceSearchRefs.searchPerson = {} this.$refs.faceSearchRefs.btnLoading = false } + }, + // 摄像头相关方法 + async openCamera() { + try { + // 获取视频元素和画布元素 + this.videoElement = document.getElementById('video') + this.canvasElement = document.getElementById('canvas') + + // 请求摄像头权限 + this.stream = await navigator.mediaDevices.getUserMedia({ + video: { width: 400, height: 300 }, + audio: false + }) + + this.videoElement.srcObject = this.stream + } catch (error) { + this.$message.error('无法访问摄像头：' + error.message) + console.error('摄像头访问错误:', error) + } + }, + + takePhoto() { + if (!this.videoElement || !this.canvasElement) return + + // 设置画布尺寸与视频一致 + this.canvasElement.width = this.videoElement.videoWidth + this.canvasElement.height = this.videoElement.videoHeight + + // 将视频帧绘制到画布 + const context = this.canvasElement.getContext('2d') + context.drawImage(this.videoElement, 0, 0) + + // 将画布内容转换为base64格式 + const imageData = this.canvasElement.toDataURL('image/jpeg') + + // 更新图片显示并保存 + this.imageUrl = imageData + this.form.photo = imageData + + // 停止视频流 + this.stopStream() + }, + + resetCamera() { + // 关闭当前流并重新打开摄像头 + this.stopStream() + this.openCamera() + }, + + closeCamera() { + // 停止流并隐藏摄像头区域 + this.stopStream() + this.showCamera = false + }, + + stopStream() { + if (this.stream) { + this.stream.getTracks().forEach(track => { + track.stop() + }) + this.stream = null + } } } } @@ -444,4 +551,35 @@ export default { border-color: #909399; color: #909399; } + +.camera-container { + margin-top: 20px; + padding: 15px; + border: 1px solid #e6e6e6; + border-radius: 4px; +} + +.camera-buttons { + margin-top: 15px; + display: flex; + gap: 10px; + justify-content: center; +} + +.right-user-img { + margin-left: 30px; + text-align: center; +} + +.right-user-img img { + width: 200px; + height: 260px; + object-fit: cover; + border: 1px solid #e6e6e6; + margin-bottom: 15px; +} + +.upload-btn input { + display: none; +} diff --git a/src/views/faceRegisterH5/error.vue b/src/views/faceRegisterH5/error.vue index ae7ee29..0e60468 100644 --- a/src/views/faceRegisterH5/error.vue +++ b/src/views/faceRegisterH5/error.vue @@ -20,7 +20,10 @@ export default { }, methods: { returnValid() { - this.$router.push({ path: '/faceRegisterH5' }) + this.$router.push({ + path: '/faceRegisterH5', + query: { 'strLibcode': this.$route.query.strLibcode } + }) } } } diff --git a/src/views/faceRegisterH5/index.vue b/src/views/faceRegisterH5/index.vue index 8c6ddce..639feb5 100644 --- a/src/views/faceRegisterH5/index.vue +++ b/src/views/faceRegisterH5/index.vue @@ -18,22 +18,27 @@
-
下一步
+ 下一步 diff --git a/src/views/faceRegisterH5/success.vue b/src/views/faceRegisterH5/success.vue index db0f5b8..73f3e86 100644 --- a/src/views/faceRegisterH5/success.vue +++ b/src/views/faceRegisterH5/success.vue @@ -19,7 +19,10 @@ export default { }, methods: { returnValid() { - this.$router.push({ path: '/faceRegisterH5' }) + this.$router.push({ + path: '/faceRegisterH5', + query: { 'strLibcode': this.$route.query.strLibcode } + }) } } }