GitBucket
4.23.0
Toggle navigation
Sign in
Files
Branches
1
Releases
Issues
Pull requests
Labels
Priorities
Milestones
Wiki
Forks
hanfei
/
VueSharedPrinting
Browse code
修改身份证资料扫描
master
1 parent
5f76f47
commit
61e60c1963a55c00f5eae8ee5c0c7292b1060837
linda
authored
on 26 Dec 2023
Patch
Showing
1 changed file
src/views/selectFile.vue
Ignore Space
Show notes
View
src/views/selectFile.vue
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-show="name == 'U盘打印'"> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。 </div> </div> <div class="file"> <div class="main"> <div v-for="(item, index) in UpFile" v-bind:key="index"> {{ item.name }} </div> <input type="file" @change="handleFileChange" /> </div> <div class="btn flex-center" @click="skip('transcoding', name)"> 确认资料 </div> </div> </div> <!-- 扫描复印--> <div class="box flex-center" v-show="name == '扫描复印'"> <div class="file2"> <div class="title">已完成扫描的版面</div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')" > <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。 按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">继续扫描</div> <div class="btn flex-center" @click="skip('transcoding', name)"> 完成扫描 </div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-show="name == '身份证打印'"> <div class="file2 file3"> <div class="title">请核对您的信息</div> <div class="card"> <div class="card-box"> <img src="../assets/card2.png" alt="身份证反面" /> <div class="card-name">{{ cardInfo.name }}</div> <div class="card-gender"> {{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span> </div> <div class="card-birth"> {{ cardInfo.birthday | joinYear }} <span class="month">{{ cardInfo.birthday | joinMonth }}</span ><span class="day">{{ cardInfo.birthday | joinDay }}</span> </div> <div class="card-addr"> {{ cardInfo.address }} </div> <div class="card-id">{{ cardInfo.idNumber }}</div> <div class="card-avatar"> <img :src="cardInfo.imageName" alt="" /> </div> </div> <div class="card-box"> <img src="../assets/card1.png" alt="身份证正面" /> <div class="card-sign">珠海市公安局</div> <div class="card-date"> {{ cardInfo.issuedData }} - {{ cardInfo.validDate }} </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。 </div> <div class="btn flex-center" @click="skip('transcoding', name)"> 信息无误，继续 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; export default { name: "selectFile", components: { navbar, }, provide() { return { title: this.tit, type: this.name, }; }, filters: { joinYear(val) { return val.substring(0, 4); }, joinMonth(val) { return val.substring(4, 6); }, joinDay(val) { return val.substring(6, 8); }, }, data() { return { tit: this.$route.params.name == "U盘打印" ? "资料选取提交" : "资料扫描提交", name: this.$route.params.name, path: "ws://127.0.0.1:7000/", socket: "", imgList: [], smfyIndex: 0, UpFile: [], cardInfo: { name: "鲲怎么叫", sex: "男", nation: "汉", nationCode: "1", birthday: "19940411", address: "广东省珠海市香洲区唐家湾镇东岸村小龙组10086号", idNumber: "430421198907280306", idIssued: "珠海市公安局", issuedData: "20110310", validDate: "20210310", photoName: "", base64Photo: "", imageName: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41a98c47-1e62-4ea4-be0c-2640b773a8a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706170275&t=0104b9da7239685b89d893516103dc4e", base64Image: "(nul1)", cardType: "1", enName: "", cnName: "", passNum: "", visaTimes: "", }, }; }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name, }, }); }, onChange(index, name) { this[name] = index; }, onCancel(index, name) { this[name].splice(index, 1); }, paiz() { this.socket.send("Capture@2"); }, init: function () { if (typeof WebSocket === "undefined") { alert("您的浏览器不支持socket"); } else { // 实例化socket this.socket = new WebSocket(this.path); // 监听socket连接 this.socket.onopen = this.open; // 监听socket错误信息 this.socket.onerror = this.error; // 监听socket消息 this.socket.onmessage = this.getMessage; } }, open: function () { // console.log("socket连接成功") this.socket.send("OpenIdCardEx@0"); this.socket.send("OpenDevice@1"); this.socket.send("SetResolution@2@2592@1944"); this.socket.send("OpenVideo"); this.socket.send("RotateRight"); this.socket.send("Deskew"); }, error: function () { console.log("连接错误"); }, getMessage: function (msg) { if (typeof msg.data == "string") { if (msg.data.indexOf("GetDevCount") == 0) { let s = msg.data.substring(12); if ("1" == s || "2" == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备 alert("检测到已经连接上摄像头"); } } else if (msg.data.indexOf("Capture") == 0) { let s = msg.data.substring(8); if (s) { this.imgList.push("data:image/jpeg;base64," + s); } } else if (msg.data.indexOf("MoveDetectEvent") == 0) { this.socket.send("Capture@2"); } else if (msg.data.indexOf("IdCardEvent") == 0) { this.socket.send("UnFaceDetect"); } else if (msg.data.indexOf("ReadIdCard") == 0) { let s = msg.data.substring(11); if ("1" == s) { this.socket.send("GetIdCardResult@||"); this.socket.send("GetIdCardImage@2"); } } else if (msg.data.indexOf("GetIdCardResult") == 0) { let s = msg.data.substring(16); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetBarcode") == 0) { // alert(msg.data); let s = msg.data.substring(11); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetIdCardImage") == 0) { let s = msg.data.substring(15); let arr = s.split("#"); let faceImg = arr[0]; let myimg = document.getElementById("myCanvas3"); myimg.src = "data:image/jpeg;base64," + faceImg; } else if (msg.data.indexOf("GetBase64") == 0) { let s = msg.data.substring(10); let myimg = document.getElementById("myCanvas2"); myimg.src = "data:image/jpeg;base64," + s; alert(s); } else if (msg.data.indexOf("GetRecognitionFromFileName") == 0) { let s = msg.data.substring(27); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetOcrFromFileName") == 0) { let s = msg.data.substring(19); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetDogSN") == 0) { let s = msg.data.substring(11); let info = document.getElementById("info"); info.value = s; } } else { let reader = new FileReader(); reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { // let url = msg.target.result; // document.getElementById('myCanvas').src = url; } }; reader.readAsDataURL(msg.data); } }, close: function () { // console.log("socket已经关闭") this.socket.close(); this.socket = ""; }, handleFileChange(event) { let file = event.target.files[0]; if (file) { this.UpFile.push(file); } }, }, destroyed() { // 销毁监听 this.close(); }, mounted() { if (this.$route.params.name == "扫描复印") { this.init(); } }, }; </script> <style scoped lang="less"> .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 15.31rem; width: 32.69rem; .main { width: 31.63rem; height: 28.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; text-align: left; } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { width: 42.81rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: bold; font-size: 0.7rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.7rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.7rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; font-size: 0.7rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; font-size: 0.7rem; .month { margin-left: 2.3rem; } .day { margin-left: 1.5rem; } } .card-addr { width: 10rem; position: absolute; top: 8.1rem; left: 4.5rem; font-size: 0.7rem; text-align: left; } .card-id { position: absolute; bottom: 1.05rem; left: 8rem; font-size: 0.7rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient( 132deg, #52a39d 0%, #a1c553 50%, #81d012 100% ); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } </style>
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div class="box flex-center" v-show="name == 'U盘打印'"> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。 </div> </div> <div class="file"> <div class="main"> <div v-for="(item, index) in UpFile" v-bind:key="index"> {{ item.name }} </div> <input type="file" @change="handleFileChange" /> </div> <div class="btn flex-center" @click="skip('transcoding', name)"> 确认资料 </div> </div> </div> <!-- 扫描复印--> <div class="box flex-center" v-show="name == '扫描复印'"> <div class="file2"> <div class="title">已完成扫描的版面</div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')" > <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。 按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">继续扫描</div> <div class="btn flex-center" @click="skip('transcoding', name)"> 完成扫描 </div> </div> </div> </div> <!-- 身份证打印--> <div class="box flex-center" v-show="name == '身份证打印'"> <div class="file2 file3"> <div class="title">请核对您的信息</div> <div class="card flex-between"> <div class="card-box"> <div class="card-title">正面</div> <img src="../assets/card1.png" alt="身份证正面" /> <div class="card-sign">珠海市公安局</div> <div class="card-date"> {{ cardInfo.issuedData }} - {{ cardInfo.validDate }} </div> </div> <div class="card-box"> <div class="card-title">反面</div> <img src="../assets/card2.png" alt="身份证反面" /> <div class="card-name">{{ cardInfo.name }}</div> <div class="card-gender"> {{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span> </div> <div class="card-birth"> {{ cardInfo.birthday | joinYear }} <span class="month">{{ cardInfo.birthday | joinMonth }}</span ><span class="day">{{ cardInfo.birthday | joinDay }}</span> </div> <div class="card-addr"> {{ cardInfo.address }} </div> <div class="card-id">{{ cardInfo.idNumber }}</div> <div class="card-avatar"> <img :src="cardInfo.imageName" alt="" /> </div> </div> </div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。 </div> <div class="btn flex-center" @click="skip('transcoding', name)"> 信息无误，继续 </div> </div> </div> </div> </template> <script> import navbar from "@/components/nav"; export default { name: "selectFile", components: { navbar, }, provide() { return { title: this.tit, type: this.name, }; }, filters: { joinYear(val) { return val.substring(0, 4); }, joinMonth(val) { return val.substring(4, 6); }, joinDay(val) { return val.substring(6, 8); }, }, data() { return { tit: this.$route.params.name == "U盘打印" ? "资料选取提交" : "资料扫描提交", name: this.$route.params.name, path: "ws://127.0.0.1:7000/", socket: "", imgList: [], smfyIndex: 0, UpFile: [], cardInfo: { name: "鲲怎么叫", sex: "男", nation: "汉", nationCode: "1", birthday: "19940411", address: "广东省珠海市香洲区唐家湾镇东岸村小龙组10086号", idNumber: "430421198907280306", idIssued: "珠海市公安局", issuedData: "20110310", validDate: "20210310", photoName: "", base64Photo: "", imageName: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41a98c47-1e62-4ea4-be0c-2640b773a8a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706170275&t=0104b9da7239685b89d893516103dc4e", base64Image: "(nul1)", cardType: "1", enName: "", cnName: "", passNum: "", visaTimes: "", }, }; }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name, }, }); }, onChange(index, name) { this[name] = index; }, onCancel(index, name) { this[name].splice(index, 1); }, paiz() { this.socket.send("Capture@2"); }, init: function () { if (typeof WebSocket === "undefined") { alert("您的浏览器不支持socket"); } else { // 实例化socket this.socket = new WebSocket(this.path); // 监听socket连接 this.socket.onopen = this.open; // 监听socket错误信息 this.socket.onerror = this.error; // 监听socket消息 this.socket.onmessage = this.getMessage; } }, open: function () { // console.log("socket连接成功") this.socket.send("OpenIdCardEx@0"); this.socket.send("OpenDevice@1"); this.socket.send("SetResolution@2@2592@1944"); this.socket.send("OpenVideo"); this.socket.send("RotateRight"); this.socket.send("Deskew"); }, error: function () { console.log("连接错误"); }, getMessage: function (msg) { if (typeof msg.data == "string") { if (msg.data.indexOf("GetDevCount") == 0) { let s = msg.data.substring(12); if ("1" == s || "2" == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备 alert("检测到已经连接上摄像头"); } } else if (msg.data.indexOf("Capture") == 0) { let s = msg.data.substring(8); if (s) { this.imgList.push("data:image/jpeg;base64," + s); } } else if (msg.data.indexOf("MoveDetectEvent") == 0) { this.socket.send("Capture@2"); } else if (msg.data.indexOf("IdCardEvent") == 0) { this.socket.send("UnFaceDetect"); } else if (msg.data.indexOf("ReadIdCard") == 0) { let s = msg.data.substring(11); if ("1" == s) { this.socket.send("GetIdCardResult@||"); this.socket.send("GetIdCardImage@2"); } } else if (msg.data.indexOf("GetIdCardResult") == 0) { let s = msg.data.substring(16); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetBarcode") == 0) { // alert(msg.data); let s = msg.data.substring(11); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetIdCardImage") == 0) { let s = msg.data.substring(15); let arr = s.split("#"); let faceImg = arr[0]; let myimg = document.getElementById("myCanvas3"); myimg.src = "data:image/jpeg;base64," + faceImg; } else if (msg.data.indexOf("GetBase64") == 0) { let s = msg.data.substring(10); let myimg = document.getElementById("myCanvas2"); myimg.src = "data:image/jpeg;base64," + s; alert(s); } else if (msg.data.indexOf("GetRecognitionFromFileName") == 0) { let s = msg.data.substring(27); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetOcrFromFileName") == 0) { let s = msg.data.substring(19); let info = document.getElementById("info"); info.value = s; } else if (msg.data.indexOf("GetDogSN") == 0) { let s = msg.data.substring(11); let info = document.getElementById("info"); info.value = s; } } else { let reader = new FileReader(); reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { // let url = msg.target.result; // document.getElementById('myCanvas').src = url; } }; reader.readAsDataURL(msg.data); } }, close: function () { // console.log("socket已经关闭") this.socket.close(); this.socket = ""; }, handleFileChange(event) { let file = event.target.files[0]; if (file) { this.UpFile.push(file); } }, }, destroyed() { // 销毁监听 this.close(); }, mounted() { if (this.$route.params.name == "扫描复印") { this.init(); } }, }; </script> <style scoped lang="less"> .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 15.31rem; width: 32.69rem; .main { width: 31.63rem; height: 28.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; text-align: left; } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { width: 39.81rem; height: 31.31rem; .card-box { width: 25rem; margin-right: 5rem; position: relative; font-weight: bold; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 3.7rem; left: 10.5rem; font-size: 0.7rem; } .card-date { position: absolute; bottom: 1.7rem; left: 10.5rem; font-size: 0.7rem; } .card-name { position: absolute; top: 5.5rem; left: 4.5rem; font-size: 0.7rem; } .card-gender { position: absolute; top: 7.5rem; left: 4.5rem; font-size: 0.7rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 9.5rem; left: 4.5rem; font-size: 0.7rem; .month { margin-left: 2.4rem; } .day { margin-left: 1.6rem; } } .card-addr { width: 10rem; position: absolute; top: 11.35rem; left: 4.5rem; font-size: 0.7rem; text-align: left; } .card-id { position: absolute; bottom: 2.1rem; left: 8rem; font-size: 0.7rem; } .card-avatar { position: absolute; top: 6.5rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient( 132deg, #52a39d 0%, #a1c553 50%, #81d012 100% ); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } </style>
Show line notes below
GitBucket
4.23.0
GitBucket
4.23.0