From 33dc504ffb761847d6d42b31dfa107ba3ea6786a Mon Sep 17 00:00:00 2001 From: Vce Date: Tue, 18 Jun 2024 15:28:05 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E8=B0=83=E6=95=B4=E5=8A=B3?= =?UTF-8?q?=E5=8A=A1=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=E4=B8=AD=E4=BA=BA?= =?UTF-8?q?=E5=91=98=E5=BD=95=E5=85=A5=E7=9A=84vueCropper=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E6=B7=BB=E5=8A=A0=E7=AE=A1=E7=90=86=E4=BA=BA=E5=91=98?= =?UTF-8?q?=E5=92=8C=E4=B8=B4=E6=97=B6=E4=BA=BA=E5=91=98=E7=9A=84=E6=B5=B7?= =?UTF-8?q?=E5=BA=B7=E8=AE=BE=E5=A4=87=E5=88=A4=E6=96=AD=E4=BB=A5=E5=8F=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comboForm/dialogPage/adminDialog.vue | 1 + .../comboForm/dialogPage/laborDialog.vue | 1 + .../comboForm/dialogPage/temporaryDialog.vue | 1 + .../laborManage/personDetails.vue | 1 + .../personModule/administration.vue | 93 +++++++++++-- .../personModule/laborComponent.vue | 15 +- .../laborManage/personModule/temporary.vue | 130 ++++++++++++++++-- 7 files changed, 208 insertions(+), 34 deletions(-) diff --git a/src/views/projectFront/laborManage/components/comboForm/dialogPage/adminDialog.vue b/src/views/projectFront/laborManage/components/comboForm/dialogPage/adminDialog.vue index c2f1b380..772a3dab 100644 --- a/src/views/projectFront/laborManage/components/comboForm/dialogPage/adminDialog.vue +++ b/src/views/projectFront/laborManage/components/comboForm/dialogPage/adminDialog.vue @@ -1046,6 +1046,7 @@ :autoCropHeight="cropperOption.autoCropHeight" :outputSize="1" :maxImgSize="300" + :centerBox="true" mode="contain" :autoCrop="true" > diff --git a/src/views/projectFront/laborManage/components/comboForm/dialogPage/laborDialog.vue b/src/views/projectFront/laborManage/components/comboForm/dialogPage/laborDialog.vue index 5918bb97..8c03ed9d 100644 --- a/src/views/projectFront/laborManage/components/comboForm/dialogPage/laborDialog.vue +++ b/src/views/projectFront/laborManage/components/comboForm/dialogPage/laborDialog.vue @@ -964,6 +964,7 @@ :autoCropHeight="cropperOption.autoCropHeight" :outputSize="1" :maxImgSize="300" + :centerBox="true" mode="contain" :autoCrop="true" > diff --git a/src/views/projectFront/laborManage/components/comboForm/dialogPage/temporaryDialog.vue b/src/views/projectFront/laborManage/components/comboForm/dialogPage/temporaryDialog.vue index 75cda90c..39b5300a 100644 --- a/src/views/projectFront/laborManage/components/comboForm/dialogPage/temporaryDialog.vue +++ b/src/views/projectFront/laborManage/components/comboForm/dialogPage/temporaryDialog.vue @@ -507,6 +507,7 @@ :autoCropHeight="cropperOption.autoCropHeight" :outputSize="1" :maxImgSize="300" + :centerBox="true" mode="contain" :autoCrop="true" > diff --git a/src/views/projectFront/laborManage/personDetails.vue b/src/views/projectFront/laborManage/personDetails.vue index 9de566f5..b6b6c288 100644 --- a/src/views/projectFront/laborManage/personDetails.vue +++ b/src/views/projectFront/laborManage/personDetails.vue @@ -2318,6 +2318,7 @@ :autoCropHeight="cropperOption.autoCropHeight" :outputSize="1" :maxImgSize="300" + :centerBox="true" mode="contain" :autoCrop="true" > diff --git a/src/views/projectFront/laborManage/personModule/administration.vue b/src/views/projectFront/laborManage/personModule/administration.vue index 0bede063..70af81c8 100644 --- a/src/views/projectFront/laborManage/personModule/administration.vue +++ b/src/views/projectFront/laborManage/personModule/administration.vue @@ -2009,8 +2009,11 @@ :outputType="cropperOption.outputType" :autoCropWidth="cropperOption.autoCropWidth" :autoCropHeight="cropperOption.autoCropHeight" + :outputSize="1" + :maxImgSize="300" + :centerBox="true" + mode="contain" :autoCrop="true" - :fixedBox="true" > @@ -2190,6 +2193,7 @@ import { importImgDataApi, xmglXzHikvisionSyncGetNewestList, xmglXzHikvisionSyncRetryAPI, + checkfaceHikvisionApi, } from "@/assets/js/api/laborPerson"; import { selectUserDevAuthorityByUserIdApi } from "@/assets/js/api/configManage"; import { getProjectConfigListApi } from "@/assets/js/api/project.js"; @@ -2358,7 +2362,7 @@ export default { enterpriseTypeId: "", enterpriseTypeList: [], cropperOption: { - outputType: "png", + outputType: "jpeg", img: "", autoCropWidth: 300, // 默认生成截图框宽度 autoCropHeight: 360, // 默认生成截图框高度 @@ -2501,14 +2505,32 @@ export default { handleUpload(fileData, type) { const file = fileData.file; // 压缩图片 - lrz(file, { quality: 1 }).then((result) => { + // lrz(file, { quality: 1 }).then((result) => { const formData = new FormData(); - formData.append("files", result.file); + // formData.append("files", result.file); + // formData.append("files", result.file， image.jpg); + formData.append("files", file, "image.jpg"); + // 图片上传 apiUploadImage(formData).then((res) => { if (res.code == 200 || res.status == "SUCCESS") { + const imgInfo = res.data[0]; + if ( + imgInfo.fileInfo.contentType != "image/jpeg" && + imgInfo.fileInfo.contentType != "image/jpg" + // file.type != "image/png" + ) { + this.$message.error(this.$t("请上传jpg格式图片")); //"请上传jpg、jpeg格式图片" + return false; + } + let imgSize = Number(imgInfo.fileInfo.size / 1024); + console.log(11111111, imgSize); + if (imgSize <= 10 || imgSize >= 200) { + this.$message.error("文件大小不能超过200kb小于10kb,请重新上传!"); + return false; + } switch (type) { case "idCardAvatar": // 身份证头像 this.personForm.idCardBigPhotoUrl = imgInfo.imageUrl; @@ -2517,9 +2539,31 @@ export default { ]; break; case "livesFace": // 现场采集人脸 + if(this.isIscDevice){ + const loading = this.$loading({ + lock: true, + text: '图片检测中', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.5)' + }); + + let data = {fileUrl: imgInfo.imageUrl} + checkfaceHikvisionApi(data).then((res) => { + if(res.code == 200 && res.result.checkType == "1"){ + this.cropperOption.img = + this.$store.state.FILEURL + imgInfo.imageUrl; + this.cropperDialog = true; + }else{ + this.$message.error(res.result.message) + } + }).finally(() => { + loading.close(); + }) + }else{ this.cropperOption.img = this.$store.state.FILEURL + imgInfo.imageUrl; this.cropperDialog = true; + } // let imgStatus = result.file.size / 1024 < 500 // if (!imgStatus) { // this.cropperOption.img = @@ -2536,7 +2580,7 @@ export default { } } }); - }); + // }); }, changePeople(val) {}, issuePersonFn() { @@ -3529,6 +3573,12 @@ export default { this.$message.error(this.$t("message.laborMange.hint8")); //"请上传jpg、jpeg格式图片" return false; } + let imgSize = Number(file.size / 1024); + console.log(11111111, imgSize); + if (imgSize <= 10 || imgSize >= 200) { + this.$message.error("文件大小不能超过200kb小于10kb,请重新上传!"); + return false; + } } let fileType = file.type.split("/")[0]; if (fileType == "image") { @@ -3641,9 +3691,30 @@ export default { checkFace(url) { checkFaceApi({ fileUrl: url }).then((res) => { if (res.result.checkType == 1) { - this.personForm.fieldAcquisitionUrl = url; - this.fieldAcquisitionFile = [{ name: "", url: url }]; - this.cropperDialog = false; + if(this.isIscDevice){ + const loading = this.$loading({ + lock: true, + text: '裁剪图片检测中', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.5)' + }); + let data = {fileUrl: url} + checkfaceHikvisionApi(data).then((res) => { + if(res.code == 200 && res.result.checkType == "1"){ + this.personForm.fieldAcquisitionUrl = url; + this.fieldAcquisitionFile = [{ name: "", url: url }]; + this.cropperDialog = false; + }else{ + this.$message.error(res.result.message); + } + }).finally(() => { + loading.close(); + }) + }else{ + this.personForm.fieldAcquisitionUrl = url; + this.fieldAcquisitionFile = [{ name: "", url: url }]; + this.cropperDialog = false; + } } else { this.$message.error(res.result.message); } @@ -3669,6 +3740,12 @@ export default { }) .then((res) => { console.log("aaaaa", res); + let imgSize = Number(res.data.data[0].fileInfo.size / 1024); + console.log('经过vueCropper裁剪后', imgSize); + if (imgSize <= 10 || imgSize >= 200) { + this.$message.error("图片裁剪后大小不能超过200kb小于10kb,请重新裁剪或重新上传图片!"); + return false; + } if (res.data.status == "SUCCESS") { if (this.isSzProject == 1) { this.checkImgLibrary(res.data.data[0].imageUrl); diff --git a/src/views/projectFront/laborManage/personModule/laborComponent.vue b/src/views/projectFront/laborManage/personModule/laborComponent.vue index 9a81e69f..e9db22d3 100644 --- a/src/views/projectFront/laborManage/personModule/laborComponent.vue +++ b/src/views/projectFront/laborManage/personModule/laborComponent.vue @@ -2261,6 +2261,7 @@ :autoCropHeight="cropperOption.autoCropHeight" :outputSize="1" :maxImgSize="300" + :centerBox="true" mode="contain" :autoCrop="true" > @@ -2651,7 +2652,6 @@ export default { attendRulesList: [], enterpriseTypeId: "", cropperOption: { - // outputType: "png", outputType: "jpeg", img: "", autoCropWidth: 300, // 默认生成截图框宽度 @@ -2786,11 +2786,10 @@ export default { // 图片上传 apiUploadImage(formData).then((res) => { if (res.code == 200 || res.status == "SUCCESS") { - console.log("0000000000000000000000000000") - console.log(res) - console.log("0000000000000000000000000000") + console.log("图片上传后",res) const imgInfo = res.data[0]; + if ( imgInfo.fileInfo.contentType != "image/jpeg" && imgInfo.fileInfo.contentType != "image/jpg" @@ -4148,9 +4147,7 @@ export default { this.$message.error(this.$t("message.companyDiagram.uploadMsg")); //只能上传图片 return false; } else if (type == 7) { - console.log('11111111111111111111') - console.log(file); - console.log('11111111111111111111') + console.log("判断大小以及格式之前的图片",file); if ( file.type != "image/jpeg" && file.type != "image/jpg" @@ -4407,10 +4404,6 @@ export default { loading.close(); }) }else{ - // this.$message({ - // message: "非海康设备，请检查后重试！", - // type: "error", - // }); this.personForm.fieldAcquisitionUrl = url; this.fieldAcquisitionFile = [{ name: "", url: url }]; this.cropperDialog = false; diff --git a/src/views/projectFront/laborManage/personModule/temporary.vue b/src/views/projectFront/laborManage/personModule/temporary.vue index eca41598..945e1057 100644 --- a/src/views/projectFront/laborManage/personModule/temporary.vue +++ b/src/views/projectFront/laborManage/personModule/temporary.vue @@ -587,9 +587,9 @@ size="medium" style="padding: 9px 20px" type="primary" - v-if="titleType != 'detail'" >{{ $t("message.laborMange.clickOnTheUpload") }} + {{ $t("message.laborMange.clickOnTheUpload") }} + @@ -679,8 +679,11 @@ :outputType="cropperOption.outputType" :autoCropWidth="cropperOption.autoCropWidth" :autoCropHeight="cropperOption.autoCropHeight" + :outputSize="1" + :maxImgSize="300" + :centerBox="true" + mode="contain" :autoCrop="true" - :fixedBox="true" > @@ -710,6 +713,9 @@ import { editWorkerInfo, deleteWorkerInfo, getWorkerInfoList, + checkfaceHikvisionApi, + getProjectUfaceConfigInfo, + checkFaceApi, } from "@/assets/js/api/laborPerson"; import { IdentityCodeValid @@ -725,11 +731,12 @@ export default { }, data() { return { + isIscDevice: false, //是否是海康门禁isc设备 //显示的文件列表 fieldAcquisitionUrlFile: [], idCardBigPhotoUrlFile: [], cropperOption: { - outputType: "png", + outputType: "jpeg", img: "", autoCropWidth: 300, // 默认生成截图框宽度 autoCropHeight: 360, // 默认生成截图框高度 @@ -809,6 +816,7 @@ export default { created() { this.projectSn = this.$store.state.projectSn; this.getInfoList(); + this.getConfig(); }, methods: { // 人员照片库比对 @@ -842,14 +850,41 @@ export default { checkFace(url) { checkFaceApi({ fileUrl: url }).then((res) => { if (res.result.checkType == 1) { - if (this.temporaryDialog1 || this.temporaryDialog2) { - this.personForm.fieldAcquisitionUrl = url; - this.fieldAcquisitionFile = [{ name: "", url: url }]; - this.cropperDialog = false; - } else { - this.addForm.fieldAcquisitionUrl = url; - this.fieldAcquisitionFile = [{ name: "", url: url }]; - this.cropperDialog = false; + if(this.isIscDevice){ + const loading = this.$loading({ + lock: true, + text: '裁剪图片检测中', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.5)' + }); + let data = {fileUrl: url} + checkfaceHikvisionApi(data).then((res) => { + if(res.code == 200 && res.result.checkType == "1"){ + if (this.temporaryDialog1 || this.temporaryDialog2) { + this.personForm.fieldAcquisitionUrl = url; + this.fieldAcquisitionFile = [{ name: "", url: url }]; + this.cropperDialog = false; + } else { + this.addForm.fieldAcquisitionUrl = url; + this.fieldAcquisitionFile = [{ name: "", url: url }]; + this.cropperDialog = false; + } + }else{ + this.$message.error(res.result.message); + } + }).finally(() => { + loading.close(); + }) + }else{ + if (this.temporaryDialog1 || this.temporaryDialog2) { + this.personForm.fieldAcquisitionUrl = url; + this.fieldAcquisitionFile = [{ name: "", url: url }]; + this.cropperDialog = false; + } else { + this.addForm.fieldAcquisitionUrl = url; + this.fieldAcquisitionFile = [{ name: "", url: url }]; + this.cropperDialog = false; + } } } else { this.$message.error(res.result.message); @@ -876,6 +911,12 @@ export default { }) .then((res) => { console.log("aaaaa", res); + let imgSize = Number(res.data.data[0].fileInfo.size / 1024); + console.log('经过vueCropper裁剪后', imgSize); + if (imgSize <= 10 || imgSize >= 200) { + this.$message.error("图片裁剪后大小不能超过200kb小于10kb,请重新裁剪或重新上传图片!"); + return false; + } if (res.data.status == "SUCCESS") { if (this.isSzProject == 1) { this.checkImgLibrary(res.data.data[0].imageUrl); @@ -890,14 +931,33 @@ export default { console.log(fileData, 111222); const file = fileData.file; // 压缩图片 - lrz(file, { quality: 1 }).then((result) => { + // lrz(file, { quality: 1 }).then((result) => { const formData = new FormData(); - formData.append("files", result.file); + // formData.append("files", result.file); + // formData.append("files", result.file, image.jpg); + formData.append("files", file, "image.jpg"); + // 图片上传 apiUploadImage(formData).then((res) => { if (res.code == 200 || res.status == "SUCCESS") { + const imgInfo = res.data[0]; + if ( + imgInfo.fileInfo.contentType != "image/jpeg" && + imgInfo.fileInfo.contentType != "image/jpg" + // file.type != "image/png" + ) { + this.$message.error(this.$t("请上传jpg格式图片")); //"请上传jpg、jpeg格式图片" + return false; + } + let imgSize = Number(imgInfo.fileInfo.size / 1024); + console.log(11111111, imgSize); + if (imgSize <= 10 || imgSize >= 200) { + this.$message.error("文件大小不能超过200kb小于10kb,请重新上传!"); + return false; + } + switch (type) { case "idCardAvatar": // 身份证头像 this.addForm.idCardBigPhotoUrl = imgInfo.imageUrl; @@ -906,9 +966,31 @@ export default { ]; break; case "livesFace": // 现场采集人脸 + if(this.isIscDevice){ + const loading = this.$loading({ + lock: true, + text: '图片检测中', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.5)' + }); + + let data = {fileUrl: imgInfo.imageUrl} + checkfaceHikvisionApi(data).then((res) => { + if(res.code == 200 && res.result.checkType == "1"){ + this.cropperOption.img = + this.$store.state.FILEURL + imgInfo.imageUrl; + this.cropperDialog = true; + }else{ + this.$message.error(res.result.message) + } + }).finally(() => { + loading.close(); + }) + }else{ this.cropperOption.img = this.$store.state.FILEURL + imgInfo.imageUrl; this.cropperDialog = true; + } // let imgStatus = result.file.size / 1024 < 500 // if (!imgStatus) { // this.cropperOption.img = @@ -925,7 +1007,7 @@ export default { } } }); - }); + // }); }, // 文件上传 之前 handleBeforeUpload(file, type) { @@ -946,6 +1028,12 @@ export default { this.$message.error(this.$t("message.laborMange.hint8")); //"请上传jpg、jpeg格式图片" return false; } + let imgSize = Number(file.size / 1024); + console.log(11111111, imgSize); + if (imgSize <= 10 || imgSize >= 200) { + this.$message.error("文件大小不能超过200kb小于10kb,请重新上传!"); + return false; + } } return true; }, @@ -1063,6 +1151,18 @@ export default { "&codeState=" + this.codeState; }, + getConfig() { + getProjectUfaceConfigInfo({ + projectSn: this.$store.state.projectSn, + }).then((result) => { + if (result.success) { + if (result.result) { + this.isUploadToHouse = result.result.housing ? true : false; + this.isIscDevice = result.result.supplierType == 9 ? true : false; + } + } + }); + }, //获取列表信息 getInfoList() { let data = {