<template>
<!-- 选取资料-->
<div class="selectFile">
<navbar :name="name" />
<!-- U盘打印-->
<div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == 'U盘打印'">
<div :class="['tip', { 'vertical-tip-width': isVertical }]" style="width: 20rem">
<div class="title">温馨提示</div>
<div :class="['content', { 'vertical-tip-font': isVertical }]">请在右侧文件浏览区，找到待印资料文件存放的目录(文件夹)，然后点选您需要打印的文件，之后按下“确认资料”按钮来提交资料。</div>
</div>
<div :class="['file', { 'vertical-margin-left': isVertical }]">
<div class="main" style="width: 50rem">
<div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start">
<input type="checkbox" v-model="item.sta" />
<div class="name flex-start" @click="readPDF(item.name)">{{ item.name }}</div>
</div>
</div>
<div class="flex-between but">
<div class="btn flex-center" @click="skip('argument', name)">确认资料</div>
</div>
</div>
</div>
<!-- 扫描打印-->
<div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '扫描打印'">
<div :class="['file2', { 'vertical-margin-right': isVertical }]">
<div class="title flex-between">
已完成扫描的版面
<span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span>
</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 v-show="smfyIndex != -1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" @click="previewImg(imgList[smfyIndex])" />
<img v-show="smfyIndex == -1" id="myCanvas" style="width: 25rem; height: 100%" />
</div>
</div>
<div class="tip tip2">
<div class="title">温馨提示</div>
<div class="content">
每次扫描前，可以按“预览”按钮来实时查看版面效果。已经扫描好的 页面显示在左边的列表中，您可以点击列表中的缩略图进行浏览核对，
不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描，请按要求放置好资料后，按“继续扫描”。按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描工作。
</div>
<div class="flex-between but">
<div class="btn flex-center" @click="paiz()">{{ imgList.length > 0 ? '继续扫描' : '开始扫描' }}</div>
<div class="btn flex-center" @click="skip('argument', name)">完成扫描</div>
</div>
</div>
</div>
<!-- 身份证打印-->
<div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '身份证打印'">
<div :class="['file2', 'file3', { 'vertical-margin-right': isVertical }]" style="margin-right: 14rem">
<div class="title">请核对您的信息</div>
<div class="card" v-if="cardInfo != ''">
<div class="card-box2">
<img src="../assets/card2.png" alt="身份证正面" />
<div class="diamond">
<div class="name">{{ cardInfo.name }}</div>
<div class="gender flex-start">
{{ cardInfo.xbmc }}
<div>{{ cardInfo.mzmc }}</div>
</div>
<div class="birth flex-start">
<span>{{ cardInfo.birthday | joinYear }}</span>
<div>{{ cardInfo.birthday | joinMonth }}</div>
<div>{{ cardInfo.birthday | joinDay }}</div>
</div>
<div class="addr">{{ cardInfo.address }}</div>
<div class="idNum">{{ cardInfo.idNum }}</div>
<div class="avatar"><img :src="photo" alt="" /></div>
</div>
</div>
<div class="card-box2">
<img src="../assets/card1.png" alt="身份证反面" />
<div class="diamond diamond2">
<div class="sign">{{ cardInfo.issueOrg }}</div>
<div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div>
</div>
</div>
</div>
<div>
<div class="card dyImg" id="captureArea" ref="captureArea" v-if="cardInfo != ''">
<div class="card-box2">
<img src="../assets/card2.png" alt="身份证正面" />
<div class="diamond">
<div class="name">{{ cardInfo.name }}</div>
<div class="gender flex-start">
{{ cardInfo.xbmc }}
<div>{{ cardInfo.mzmc }}</div>
</div>
<div class="birth flex-start">
<span>{{ cardInfo.birthday | joinYear }}</span>
<div>{{ cardInfo.birthday | joinMonth }}</div>
<div>{{ cardInfo.birthday | joinDay }}</div>
</div>
<div class="addr">{{ cardInfo.address }}</div>
<div class="idNum">{{ cardInfo.idNum }}</div>
<div class="avatar"><img :src="photo" alt="" /></div>
</div>
</div>
<div class="card-box2">
<img src="../assets/card1.png" alt="身份证反面" />
<div class="diamond diamond2">
<div class="sign">{{ cardInfo.issueOrg }}</div>
<div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <canvas id="sfzCanvas" width="640" height="900" ref="sfzCanvas" style="position: fixed;left: 100%;top: 100%;"></canvas>-->
<div class="tip">
<div class="title">温馨提示</div>
<div class="content">身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div>
<div class="btn flex-center" @click="skip('argument', name)">信息无误，继续</div>
</div>
</div>
<audio ref="audio" class="aud">
<source src="../assets/audio/FileformatTransforming.mp3" />
</audio>
<div v-if="dialogVisible && name === 'U盘打印'">
<div class="mask" style="width: 100%; height: 100%" @click="dialogVisible = false">
<div class="content" style="background-color: #fff; width: 70%; height: 35rem">
<div class="content-header">预览</div>
<iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%;resize: none;"></iframe>
</div>
</div>
</div>
<div v-if="IsPreviewImg && name === '扫描打印'">
<div class="previewImg" style="width: 100%; height: 100%; background-color: black" @click="IsPreviewImg = false">
<img :src="previewImgs" alt="" style="width: 39rem; height: 53.9rem" />
</div>
</div>
<div class="dyzTip" v-if="dyzTip">
<div class="curtain"></div>
<div class="content">
<div class="flex-center">高拍仪检测异常信息提示</div>
<div class="flex-center" style="padding: .8rem 1rem;font-weight: 500;">
尊敬的用户您好，抱歉地通知您，系统检测到高拍仪提供的扫描打印服务状态异常，我们准备随机重启计算机来恢复扫描打印功能，请您稍后等计算机重启后重新尝试扫描打印功能，谢谢！
</div>
<div class="flex-between" style="margin: 4rem 2rem 0;">
<div class="btn flex-center" @click="tikChange(0)">返回首页</div>
<div class="btn flex-center" @click="tikChange(1)">立即重启</div>
</div>
</div>
</div>
</div>
</template>
<script>
import navbar from '@/components/nav'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import {changeIdPhotoBgc, images2Pdf, upload2Pdf} from '@/api/resultApi'
import {readUsb, readFile, readCard, readFile2, shutdown} from '@/api/bdResultApi'
import parseCardWzxx from '../utils/mz'
import html2Canvas from "html2canvas";
import alert from "@/utils/alert";
export default {
name: 'selectFile',
components: {
navbar
},
provide() {
return {
title: this.tit,
type: this.name
}
},
filters: {
joinYear(val) {
return val.substring(0, 4)
},
joinMonth(val) {
if (val.substring(4, 5) == 0) {
return val.substring(5, 6)
}
return val.substring(4, 6)
},
joinDay(val) {
if (val.substring(6, 7) == 0) {
return val.substring(7, 8)
}
return val.substring(6, 8)
},
joinRq(val) {
return val.substring(0, 4) + '.' + val.substring(4, 6) + '.' + val.substring(6, 8)
}
},
data() {
return {
isChecked: true,
tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交',
name: this.cite.modeName,
path: this.cite.inWebURL,
socket: '',
imgList: [],
smfyIndex: -1,
photo: '',
UpFile: [],
cardInfo: '',
usbList: [],
usbTime: '',
usbNum: 0,
isVertical: false,
dialogVisible: false,
pdfUrl: '',
IsPreviewImg: false,
previewImgs: '',
canvasData: '',
dyzTip: false,
}
},
created() {
this.isVertical = this.cite.isVertical
},
methods: {
getPdf(title,id){
let _this = this
html2Canvas(document.querySelector(`#${id}`), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
// 删除本地存储的base64字段
let pdfData = PDF.output('datauristring')//获取base64Pdf
// console.log('pdfData', pdfData)
let file = _this.dataURLtoFile(pdfData,'zjz.pdf')
// console.log('222',file)
_this.uploadImg([file],false)
// return pdfData
// 导出PDF文件
// PDF.save(title + '.pdf')
})
},
// 导出pdf
async exportPDF() {
let _this = this
_this.getPdf('证件照', 'captureArea');
},
async uploadImg(data, sta) {
let _this = this
_this.cite.loadingSta = {
sta: true,
name: '正在转码，请稍后'
}
const addr = require('../assets/audio/FileformatTransforming.mp3')
this.play(addr)
let forData = new FormData()
let j = data.length
_this.usbNum = j
for (let i = 0; i < data.length; i++) {
let formData = new FormData()
let file = data[i]
if (sta) {
// let dataURL = file.toDataURL('image/png')
let name = i + '.png'
file = _this.dataURLtoFile(file, name)
}
formData.append('file', file) // 使用数组语法添加多个文件
if (this.cite.modeName == '身份证打印') {
// let res = await image2Pdf(formData)
let res = await upload2Pdf(formData).catch(error => {alert(error,this)})
// console.log(res)
_this.cite.selectedFile.push(res)
// console.log('打印文件', this.cite.selectedFile, res)
if (_this.usbNum == i + 1) {
// 转码结束
_this.cite.loadingSta = {
sta: false
}
_this.$router.push({
name: 'argument'
})
}
} else {
forData.append('images', file)
// let res = await upload2Pdf(formData)
// _this.cite.selectedFile.push(res)
// if(_this.usbNum == i+1) {
// // 转码结束
// _this.cite.loadingSta = {
// sta: false,
// }
// _this.$router.push({
// name: 'argument',
// })
// }
// console.log('打印文件', this.cite.selectedFile, res)
}
}
if (this.name == '扫描打印') {
let res = await images2Pdf(forData).catch(error => {alert(error,this)})
_this.cite.selectedFile.push(res)
// 转码结束
_this.cite.loadingSta = {
sta: false
}
_this.$router.push({
name: 'argument'
})
}
},
async readPDF(url) {
// 请求接口
//将文件转为pdf
const res = await readFile({ filePath: url }).catch(error => {alert(error,this)})
if (res.data.previewPath) {
this.pdfUrl = res.data.previewPath + '#scrollbars=0&toolbar=0&statusbar=0'
this.dialogVisible = true
}
// this.pdfUrl = 'https://mps.xlmalls.com/files/5447462093341142.pdf'
},
// 预览图片
previewImg(url) {
this.previewImgs = url
this.IsPreviewImg = true
},
async skip(href, name) {
if (this.usbList.length > 0) {
// 保存选中的U盘文件
// await this.uploadImg(this.UpFile, false)
console.log('u盘')
await this.dealFile()
} else if (this.imgList.length > 0) {
// 保存高拍仪图片
await this.uploadImg(this.imgList, true)
} else if (this.cardInfo) {
// 保存身份证图片
await this.exportPDF()
// await this.captureAndDownload()
} else {
this.cite.state = {
name: '请选择文件打印！',
sta: true
}
return
}
console.log(href, name)
// this.$router.push({
// name: href,
// params: {
// name: name
// }
// })
},
async captureAndDownload() {
// const captureArea = this.$refs.sfzCanvas
const captureArea = this.$refs.captureArea
// 使用 html2canvas 将区域内容生成为图片
console.log('html2canvas', window.devicePixelRatio)
let sca = 1
// if (window.devicePixelRatio >= 1) {
// sca = 0.7
// }
const canvas = await html2canvas(captureArea, { scale: sca })
console.log(canvas)
// 将 canvas 转为图片 URL
canvas.toBlob((blob) => {
// blob将base64编码的src 以二进制的形式存进了 Blob对象
const a = document.createElement("a");
a.download = "证书.png";
a.href = window.URL.createObjectURL(blob);
a.click();
console.log(blob);
}, "image/png");
const dataURL = canvas.toDataURL('image/png')
const name = 'sfz.png'
const file = this.dataURLtoFile(dataURL, name)
console.log(file)
this.uploadImg([file], false)
},
dataURLtoFile(dataURL, filename) {
const arr = dataURL.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
},
onChange(index, name, sta) {
if (name == 'usbList') {
this[name][index].sta = sta
} else {
this[name] = index
}
},
onCancel(index, name) {
if (name == 'imgList') {
this.smfyIndex = -1
}
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
this.socket.onclose = this.onljgb // 连接关闭时触发
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
onljgb: function () {
console.log('连接关闭')
// this.init()
},
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('连接错误')
// this.dyzTip = true
},
getMessage: function (msg) {
// console.log(msg,msg.data)
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 = ''
},
tikChange(i) {
if(i==1) {
shutdown().catch(error => {alert(error,this)})
}else{
this.quit()
}
},
handleFileChange(event) {
let file = event.target.files[0]
if (file) {
this.UpFile.push(file)
}
},
dwhs(n) {
return n
},
canvasSfz() {
let _this = this
let {cardInfo} = _this
const canvas = document.getElementById('sfzCanvas')
// const canvas = this.$refs.sfzCanvas;
const ctx = canvas.getContext('2d');
// 在 Canvas 上进行绘图操作
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 在Canvas画布 添加图片
let img = new Image()
img.src = require('@/assets/card2.png')
img.onload = () => {
ctx.drawImage(img, 0, 0, _this.dwhs(640), _this.dwhs(405))
ctx.font = _this.dwhs(24)+"px OCR"
// 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
ctx.textBaseline = 'middle'
ctx.fontWeight = '100'
ctx.fillStyle = "#333"
ctx.fillText(cardInfo.xbmc, _this.dwhs(120), _this.dwhs(120))
ctx.fillText(cardInfo.mzmc, _this.dwhs(245), _this.dwhs(120))
let name = cardInfo.address
let num = 11
let w = ctx.measureText(cardInfo.address).width
if(w>_this.dwhs(500)) {
ctx.fillText(name, _this.dwhs(20), _this.dwhs(345))
}else{
let t1 = name.substring(0, num);
let t2 = name.substring(num);
ctx.fillText(t1, _this.dwhs(120), _this.dwhs(220))
ctx.fillText(t2, _this.dwhs(120), _this.dwhs(255))
}
ctx.font = _this.dwhs(28)+"px STHeiti"
ctx.fillText(cardInfo.name, _this.dwhs(120), _this.dwhs(65))
ctx.font = _this.dwhs(26)+"px OCR"
ctx.fillText(cardInfo.birthday.substring(0, 4), _this.dwhs(120), _this.dwhs(170))
if (cardInfo.birthday.substring(4, 5) == 0) {
ctx.fillText(cardInfo.birthday.substring(5, 6), _this.dwhs(220), _this.dwhs(170))
}else{
ctx.fillText(cardInfo.birthday.substring(4, 6), _this.dwhs(210), _this.dwhs(170))
}
if (cardInfo.birthday.substring(6, 7) == 0) {
ctx.fillText(cardInfo.birthday.substring(7, 8), _this.dwhs(280), _this.dwhs(170))
}else{
ctx.fillText(cardInfo.birthday.substring(6, 8), _this.dwhs(270), _this.dwhs(170))
}
let img2 = new Image()
// img2.src = _this.photo
img2.src = require('@/assets/card1.png')
img2.onload = () => {
ctx.drawImage(img2, _this.dwhs(410), _this.dwhs(60), _this.dwhs(192), _this.dwhs(238))
let img3 = new Image()
img3.src = require('@/assets/card1.png')
img3.onload = () => {
ctx.drawImage(img3, 0, _this.dwhs(495), _this.dwhs(640), _this.dwhs(405))
ctx.font = _this.dwhs(28)+"px STHeiti"
ctx.fillText(cardInfo.issueOrg, _this.dwhs(260), _this.dwhs(797))
ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), _this.dwhs(260), _this.dwhs(850))
ctx.fillText('-', _this.dwhs(405), _this.dwhs(848))
ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), _this.dwhs(415), _this.dwhs(850))
canvas.style.letterSpacing = "2px";
ctx.font = _this.dwhs(32)+"px STHeiti"
ctx.fillText(cardInfo.idNum, _this.dwhs(210), _this.dwhs(345))
// canvas.toBlob(function (blob) {
// // 图片ajax上传
// _this.uploadImg([blob], false)
// },'image/png');
}
}
}
},
sfzCard2() {
let _this = this
let res = {
errorMsg: 'OK',
resultContent: {
address: '江西省赣州市寻乌县长宁镇镇山路14号402室',
birthday: '19960515',
effectDate: '20231010',
expireDate: '20431010',
gender: '1',
idNum: '360734199605150074',
issueOrg: '寻乌县公安局',
name: '韩菲',
nation: '01',
photo:
'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'
}
}
if (res.errorMsg == 'OK') {
// console.log(res.resultContent)
_this.imgDeals(res.resultContent.photo)
_this.cardInfo = parseCardWzxx(res.resultContent)
}
},
// 获取身份证信息
async sfzCard() {
let _this = this
let res = await readCard()
if (res.errorMsg == 'OK') {
// console.log(res.resultContent)
_this.imgDeals(res.resultContent.photo)
_this.cardInfo = parseCardWzxx(res.resultContent)
} else {
if (this.$route.name == 'selectFile') {
setTimeout(() => {
this.sfzCard()
}, 1000)
}
}
},
// 图片处理
imgDeals(re) {
let _this = this
let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png')
let formData = new FormData()
formData.append('file', file)
formData.append('colorEnum', 'CLEAR')
changeIdPhotoBgc(formData).then(res => {
console.log(res)
_this.photo = res.previewPath
// this.canvasSfz()
}).catch(error => {alert(error,this)})
},
// 读取U盘
readUsb() {
let data = {
extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png'
}
readUsb(data).then(res => {
// console.log(res)
if (res) {
if (this.UpFile.length != res.length) {
// console.log(this.UpFile , res)
this.UpFile = res
this.usbList = []
res.forEach(re => {
this.usbList.push({
name: re.name || re,
size: re.size,
sta: false
})
})
}
} else {
this.UpFile = []
this.usbList = []
this.cite.state = {
name: '请插入U盘',
sta: true
}
}
if (this.$route.name == 'selectFile') {
setTimeout(() => {
this.readUsb()
}, 1000)
}
}).catch(error => {alert(error,this)})
},
// 处理选中文件
async dealFile() {
let { usbList } = this
// 判断有没有选中u盘文件
let selectUsb = usbList.some(item => {
return item.sta === true
})
// 没有选中 中断后续操作 并提示
if (!selectUsb) {
this.cite.state = {
name: '请选中文件再点击确认资料',
sta: true
}
return
}
this.cite.loadingSta = {
sta: true,
name: '正在转码，请稍后'
}
const addr = require('../assets/audio/FileformatTransforming.mp3')
this.play(addr)
await usbList.forEach((re, i) => {
if (re.sta) {
this.usbNum = i
this.readFile(re.name, i, re.size)
}
})
},
async readFile(url, i, num) {
if(parseFloat(num)>5000000) {
let res = await readFile2({ filePath: url }).catch(error => {alert(error,this)})
this.cite.selectedFile.push(res.data)
}else{
let res = await readFile({ filePath: url }).catch(error => {alert(error,this)})
this.cite.selectedFile.push(res.data)
}
if (this.usbNum == i) {
// 转码结束
this.cite.loadingSta = {
sta: false
}
this.$router.push({
name: 'argument'
})
}
},
play(addr) {
let music = new Audio()
music = addr
this.$refs.audio.src = music
this.$refs.audio.play()
}
},
destroyed() {
// 销毁监听
if (this.socket) {
this.close()
}
},
mounted() {
this.cite.selectedFile = []
if (this.cite.modeName == '扫描打印') {
this.init()
} else if (this.cite.modeName == '身份证打印') {
const addr = require('../assets/audio/IdCardReaderGuide.mp3')
this.play(addr)
this.sfzCard()
} else if (this.cite.modeName == 'U盘打印') {
this.readUsb()
const addr = require('../assets/audio/Remind4PluginUSB.mp3')
this.play(addr)
}
}
}
</script>
<style scoped lang="less">
@font-face {
font-family: 'STHeiti'; //自定义字体名字
src: url('../assets/typeface/STHeiti.ttf') format('truetype'); //定义好文件的相对地址
}
@font-face {
font-family: 'OCR'; //自定义字体名字
src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址
}
.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: 9.69rem;
.main {
width: 31.63rem;
height: 26.56rem;
background: #ffffff;
border: 0.06rem solid #707070;
margin: 0 auto 2.81rem;
padding: 1rem 0;
overflow-y: scroll;
.li {
padding-left: 1rem;
.name {
min-height: 1.8rem;
text-align: left;
max-width: 80%;
margin-left: 1rem;
}
img {
width: 1.3rem;
margin-left: 1rem;
}
}
}
}
.tip2 {
width: 52rem;
.but {
.btn {
width: 24.44rem;
position: relative;
input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
}
}
}
.file2 {
margin-right: 9.69rem;
.title {
font-size: 2.13rem;
font-weight: bold;
color: #323232;
line-height: 3rem;
//text-align: left;
span {
text-decoration: underline;
font-size: 1.5rem;
font-weight: bold;
color: #323232;
line-height: 2rem;
}
.act {
color: #52a39d;
}
}
.main {
width: 39.81rem;
height: 31.31rem;
background: #eeeeee;
margin: 1.38rem auto 0;
}
.card {
//width: 42.81rem;
width: 20rem;
margin: 0 10rem;
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: 500;
font-size: 0.9rem;
line-height: 1rem;
.card-title {
padding: 1rem 0;
}
img {
width: 25rem;
}
.card-sign {
position: absolute;
bottom: 2.6rem;
left: 10.5rem;
}
.card-date {
position: absolute;
bottom: 0.5rem;
left: 10.5rem;
}
.card-name {
position: absolute;
top: 2.2rem;
left: 4.5rem;
}
.card-gender {
position: absolute;
top: 4.1rem;
left: 4.5rem;
span {
margin-left: 5rem;
}
}
.card-birth {
position: absolute;
top: 6.15rem;
left: 4.5rem;
.month {
margin-left: 1.7rem;
}
.day {
margin-left: 1.2rem;
}
}
.card-addr {
width: 11rem;
position: absolute;
top: 8.1rem;
left: 4.5rem;
text-align: left;
line-height: 1.3rem;
}
.card-id {
position: absolute;
bottom: 0.8rem;
left: 8rem;
letter-spacing: 0.2rem;
}
.card-avatar {
position: absolute;
top: 3.2rem;
right: 2rem;
width: 7rem;
height: 9rem;
img {
width: 7rem;
height: 9rem;
background-size: contain;
}
}
}
.card-box2 {
position: relative;
font-family: 'OCR';
margin: 0 auto;
img {
width: 100%;
}
.diamond {
position: absolute;
top: 0;
//left: 60px;
right: 0;
height: 100%;
//font-size: 12px;
text-align: left;
left: 3.75rem;
font-size: 0.75rem;
.name {
//font-size: 14px;
font-family: 'STHeiti';
//margin: 23px 0 10px;
font-size: 0.875rem;
margin: 1.4375rem 0 0.625rem;
}
.gender {
div {
//margin-left: 50px;
margin-left: 3.125rem;
}
}
.birth {
//margin: 12px 0;
margin: 0.9rem 0 0.8rem;
font-size: 0.85rem;
span {
//margin-right: 3px;
margin-right: 0.1875rem;
}
div {
//width: 20px;
//margin-left: 9px;
text-align: center;
width: 1.25rem;
margin-left: 0.5625rem;
}
}
.addr {
//width: 140px;
//line-height: 18px;
width: 8.75rem;
line-height: 1.125rem;
}
.idNum {
position: absolute;
font-family: 'STHeiti';
font-weight: 500;
left: 2.875rem;
font-size: 1rem;
letter-spacing: 0.0625rem;
bottom: 1.5rem;
}
.avatar {
position: absolute;
//right: 20px;
//width: 96px;
//top: 30px;
right: 1.25rem;
width: 6rem;
top: 1.875rem;
}
}
.diamond2 {
//left: 130px;
height: auto;
top: auto;
//bottom: 20px;
left: 8.125rem;
bottom: 1.25rem;
font-size: 0.8rem;
font-family: 'STHeiti';
.sign {
//margin-bottom: 14px;
margin-bottom: 0.875rem;
}
}
}
}
.dyImg {
position: fixed;
top: 100%;
left: 100%;
margin: 0;
//width: 40rem;
//height: 70.8rem;
width: 640px;
height: 900px;
padding: 300px 450px 0;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
.card-box2 {
position: relative;
font-family: 'OCR';
margin: 0 auto;
img {
width: 100%;
}
.diamond {
position: absolute;
top: 0;
right: 0;
height: 100%;
text-align: left;
left: 7.5rem;
font-size: 1.5rem;
.name {
font-family: 'STHeiti';
font-size: 28px;
margin: 50px 0 20px;
}
.gender {
div {
margin-left: 100px;
}
}
.birth {
margin: 24px 0 22px;
font-size: 26px;
span {
margin-right: 6px;
}
div {
margin-left: 18px;
width: 40px;
text-align: center;
}
}
.addr {
width: 280px;
line-height: 36px;
}
.idNum {
position: absolute;
font-family: 'STHeiti';
font-weight: 500;
left: 92px;
font-size: 32px;
letter-spacing: 2px;
bottom: 46px;
}
.avatar {
position: absolute;
right: 40px;
width: 192px;
top: 60px;
}
}
.diamond2 {
height: auto;
top: auto;
left: 260px;
bottom: 36px;
font-size: 28px;
font-weight: 400;
font-family: 'STHeiti';
.sign {
margin-bottom: 25px;
}
}
}
}
}
.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;
}
}
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
.content {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.content-header {
margin-top: 1rem;
}
}
}
// 预览图片
.previewImg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
> img {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
// 竖屏
.vertical-width-direction {
width: 95% !important;
flex-direction: column;
height: 78rem !important;
padding-bottom: 10rem;
padding-top: 8rem;
justify-content: space-around;
}
.vertical-bottom-btn {
margin-right: 0 !important;
}
.vertical-margin-right {
margin-right: 0 !important;
}
.vertical-margin-left {
margin-left: 0 !important;
}
.vertical-tip-width {
width: 32rem !important;
}
.vertical-tip-font {
text-align: left !important;
}
.dyzTip {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
.curtain {
background: #000;
width: 100%;
height: 100%;
opacity: 0.3;
}
.content {
position: absolute;
left: 50%;
margin-left: -19rem;
top: 50%;
margin-top: -12rem;
width: 38.56rem;
height: 24rem;
background: #ffffff;
border-radius: 1.25rem;
overflow: hidden;
img {
width: 100%;
}
div {
font-size: 1.38rem;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #323232;
line-height: 1.88rem;
margin-top: 1.3rem;
}
.name {
font-size: 1rem;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #323232;
line-height: 1.38rem;
text-align: left;
padding: 0 3rem;
}
.btn {
width: 16rem;
height: 3rem;
color: #fff;
background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
border-radius: 1rem;
cursor: pointer;
}
}
}
</style>
