han

hanfei / VueSharedPrinting

Browse code han master
1 parent faaeeb9 commit 792d71730826c4c28c6d17ef33563939dd487956 hanfei authored on 23 Feb 2024

Patch

Showing 2 changed files

Ignore Space Show notes View src/components/global.vue
<template> <div> <!-- 打印中提示--> <div class="dyzTip" v-if="DYZshow && DYZlist"> <div class="curtain"></div> <div class="content"> <img src="../assets/printing.png" alt="" /> <div v-if="ztyc" class="flex-center" style="padding: 0 0.3rem; margin: 0"> 小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。 </div> <!-- <div v-else class="name">正在进行{{ DYZlist[0].printFileType=='PDF'?'文档':'照片' }}打印...</div>--> <div v-else class="name">正在打印...</div> <!-- <div class="flex-center">{{ DYZlist.length }}/{{ DYZlistNum }}</div>--> <!-- <div class="flex-center name">您的资料打印中--> <!-- <span v-for="(item,index) in DYZlist2" :key="index" :style="Progress.taskCode==item.code?'':'display:none;'">第{{index+1}}份</span>--> <!-- {{ Progress.rate \|\| '0%' }}</div>--> <div class="JDT"><span :style="'width:' + Progress.rate"></span></div> <!-- <div class="flex-center">您的资料打印中{{ Progress.rate \|\| '0%' }}</div>--> <div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </div> </div> <!-- 提示--> <div class="tkTip flex-center" v-if="state.sta"> <div>{{ state.name }}</div> </div> <!-- 小程序支付--> <div class="dyzTip" v-if="zfShow"> <div class="curtain"></div> <div class="content content2"> <VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="src" logoBackgroundColor="white" ></VueQr> <p> <img @click="onChange('zfShow', false)" class="icon" src="../assets/demo10.png" alt="" /> </p> </div> </div> <!-- 页面加载中--> <div class="dyzTip" v-if="citeL.loadingSta.sta"> <div class="curtain"></div> <div class="loadingDH"> <!-- 绘制齿轮 --> <div class="load"> <div class="gear first"> <svg id="purple" viewbox="0 0 100 100" fill="#afb4db"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear second"> <svg id="pink" viewbox="0 0 100 100" fill="#FFB5C5"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear third"> <svg id="orange" viewbox="0 0 100 100" fill="#fedcbd"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <!-- 绘制圆形水珠 --> <div class="lil-circle"></div> <svg class="blur-circle"> <filter id="blur"> <fegaussianblur in="SourceGraphic" stddeviation="13"></fegaussianblur> </filter> <circle cx="70" cy="70" r="66" fill="transparent" stroke="white" stroke-width="40" filter="url(#blur)"></circle> </svg> </div> <!-- 文字 --> <div class="text">{{ citeL.loadingSta.name }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Wait4Printing.mp3" /> </audio> </div> </template> <script> import mqtt from 'mqtt/dist/mqtt' import { getAdvertisement, getDeviceByCode } from '@/api/resultApi' import VueQr from 'vue-qr' import { getDeviceCode } from '@/api/bdResultApi' export default { name: 'global', components: { VueQr }, data() { return { client: null, code: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: { name: '', sta: false }, src: '', zfShow: false, DYZlist: [], DYZlist2: [], DYZlistNum: 1, Progress: {}, numZt: 120, ztyc: false, citeL: { loadingSta: { sta: false, name: 'Loading' } } } }, created() { console.log(this.cite.ztyc) this.cite.loadingSta = { sta: true, name: '页面重启中，请稍后' } this.toLoad() setInterval(() => { if (this.cite != this.citeL) { this.citeL = this.cite } if (this.code == '') { this.toLoad() } }, 3000) }, methods: { onCloneZt() { this.numZt = 0 this.onNum() }, onNum() { if (this.numZt == 0) { this.cite.ztyc = false this.DYZshow = false this.DYZlist = [] } else { this.numZt = this.numZt - 1 setTimeout(() => { this.onNum() }, 1000) } this.ztyc = this.cite.ztyc }, onChange(name, val) { this[name] = val }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } getDeviceCode().then(res => { if(this.code=='') { this.cite.code = res.data this.code = res.data this.load() }else{ this.cite.code = res.data this.code = res.data } this.cite.loadingSta = { sta: false } }) }, load() { if (this.cite.facility === '') { this.getDeviceByCode() } // 判断是否是广告屏 if (this.cite.name != 'advertising') { this.initMqtt() setInterval(() => { if (!this.state.sta && this.cite.state.sta) { setTimeout(() => { this.cite.state.sta = false }, 3000) } this.state = this.cite.state }, 1000) } }, initMqtt() { let code = 'tzdy-web::'+this.code // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: code, //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api //连接成功 this.client.on('connect', e => { console.log('连接成功', e) this.subscribes() }) //重连提醒 this.client.on('reconnect', error => { console.log('正在重连', error) }) //连接失败提醒 this.client.on('error', error => { console.log('连接失败', error) }) //接收消息 this.client.on('message', (topic, message) => { const data = JSON.parse(message) //接受到控制信号的数据 console.log('接收消息', data) if (data.cmd == 'HEARTBEAT') { if (data.deviceStatus == 'ABNORMAL' && this.DYZshow) { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } // 判断异常语音 if (data.abnormalReason !== undefined) { this.cite.serveError = true } else { this.cite.serveError = false } } else if (data.cmd == 'ORDER_INFO') { //小程序支付 this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length // 提示语音 // this.cite.url = data.payCodeUrl // if(this.cite.selectedFile.length<1) { // this.src = data.payCodeUrl // this.zfShow=true // } } else if (data.cmd == 'LOGIN') { //登录 } else if (data.cmd == 'LOGOUT') { //登出 } else if (data.cmd == 'PRINT') { //打印任务 // this.DYZshow = true // this.zfShow = false // this.DYZlist.push(data) // this.DYZlistNum = this.DYZlist.length } else if (data.cmd == 'PRINT_STATUS') { //打印任务完成 console.log(this.DYZlist) if (data.taskStatus == 'COMPLETE') { if (this.DYZlist.length > 1) { this.DYZlist.forEach((item, index) => { if (item.code == data.taskCode) { this.DYZlist.splice(index, 1) } }) } else { if (this.DYZshow) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.Progress = {} this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then(res => { this.cite.facility = res }) } } } else if (data.taskStatus == 'INTERRUPT') { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } } else if (data.cmd == 'PRINT_PROGRESS' && !this.cite.ztyc) { console.log(data) this.Progress = data if (data.rate == '99%') { setTimeout(() => { if (this.Progress.rate == '99%') { this.Progress.rate = '100%' } }, 1500) } } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/' + this.code] this.client.subscribe(arr, { qos: 0 }, err => { if (!err) { console.log(`消息订阅成功`) } else { console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { if (this.code) { getDeviceByCode({ code: this.code }).then(res => { console.log(res) this.cite.facility = res this.getAdvertisement() }) } }, // 获取广告链接 getAdvertisement() { let name = 'DeviceScreen' if (this.cite.name == 'advertising') { name = 'AdvertisingScreen' } getAdvertisement({ deviceId: this.cite.facility.id, screen: name }).then(res => { // console.log(res) this.cite.advertisement = res \|\| '' }) }, play() { console.log(this.$refs.audio) // if (addr !== '') { // console.log('12') // let music = new Audio() // music = addr // this.$refs.audio.src = music // } this.$refs.audio.play() } } } </script> <style scoped lang="less"> .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: -14.5rem; width: 38.56rem; height: 29rem; 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: 18rem; height: 3rem; margin: 1rem auto; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; } .JDT { width: 80%; margin: 1rem auto 0; height: 1rem; border-radius: 1rem; position: relative; border: 1px solid #323232; span { position: absolute; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); top: 0; left: 0; bottom: 0; } } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; z-index: 99; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } .loadingDH { position: absolute; top: 30%; width: 100%; .load { position: relative; margin: 3.125rem auto; width: 6.25rem; height: 5rem; .gear { position: absolute; z-index: -10; width: 2.5rem; height: 2.5rem; -webkit-animation: spin 5s infinite; animation: spin 5s infinite; } .second { left: 2.5rem; width: 5rem; height: 5rem; -webkit-animation: spin-reverse 5s infinite; animation: spin-reverse 5s infinite; } .third { top: 2.8125rem; left: -0.625rem; width: 3.75rem; height: 3.75rem; } @-webkit-keyframes spin { 50% { transform: rotate(360deg); } } @keyframes spin { 50% { transform: rotate(360deg); } } @-webkit-keyframes spin-reverse { 50% { transform: rotate(-360deg); } } @keyframes spin-reverse { 50% { transform: rotate(-360deg); } } .lil-circle { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white; width: 6.25rem; height: 6.25rem; opacity: 0.65; } .blur-circle { position: absolute; top: -1.1875rem; left: -1.1875rem; } } .text { color: lightgray; font-size: 1.125rem; font-family: 'Open Sans', sans-serif; text-align: center; padding-top: 3rem; } } </style> <template> <div> <!-- 打印中提示--> <div class="dyzTip" v-if="DYZshow && DYZlist"> <div class="curtain"></div> <div class="content"> <img src="../assets/printing.png" alt="" /> <div v-if="ztyc" class="flex-center" style="padding: 0 0.3rem; margin: 0"> 小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。 </div> <!-- <div v-else class="name">正在进行{{ DYZlist[0].printFileType=='PDF'?'文档':'照片' }}打印...</div>--> <div v-else class="name">正在打印...</div> <!-- <div class="flex-center">{{ DYZlist.length }}/{{ DYZlistNum }}</div>--> <!-- <div class="flex-center name">您的资料打印中--> <!-- <span v-for="(item,index) in DYZlist2" :key="index" :style="Progress.taskCode==item.code?'':'display:none;'">第{{index+1}}份</span>--> <!-- {{ Progress.rate \|\| '0%' }}</div>--> <div class="JDT"><span :style="'width:' + Progress.rate"></span></div> <!-- <div class="flex-center">您的资料打印中{{ Progress.rate \|\| '0%' }}</div>--> <div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </div> </div> <!-- 提示--> <div class="tkTip flex-center" v-if="state.sta"> <div>{{ state.name }}</div> </div> <!-- 小程序支付--> <div class="dyzTip" v-if="zfShow"> <div class="curtain"></div> <div class="content content2"> <VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="src" logoBackgroundColor="white" ></VueQr> <p> <img @click="onChange('zfShow', false)" class="icon" src="../assets/demo10.png" alt="" /> </p> </div> </div> <!-- 页面加载中--> <div class="dyzTip" v-if="citeL.loadingSta.sta"> <div class="curtain"></div> <div class="loadingDH"> <!-- 绘制齿轮 --> <div class="load"> <div class="gear first"> <svg id="purple" viewbox="0 0 100 100" fill="#afb4db"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear second"> <svg id="pink" viewbox="0 0 100 100" fill="#FFB5C5"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear third"> <svg id="orange" viewbox="0 0 100 100" fill="#fedcbd"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <!-- 绘制圆形水珠 --> <div class="lil-circle"></div> <svg class="blur-circle"> <filter id="blur"> <fegaussianblur in="SourceGraphic" stddeviation="13"></fegaussianblur> </filter> <circle cx="70" cy="70" r="66" fill="transparent" stroke="white" stroke-width="40" filter="url(#blur)"></circle> </svg> </div> <!-- 文字 --> <div class="text">{{ citeL.loadingSta.name }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Wait4Printing.mp3" /> </audio> </div> </template> <script> import mqtt from 'mqtt/dist/mqtt' import { getAdvertisement, getDeviceByCode } from '@/api/resultApi' import VueQr from 'vue-qr' import { getDeviceCode } from '@/api/bdResultApi' export default { name: 'global', components: { VueQr }, data() { return { client: null, code: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: '', src: '', zfShow: false, DYZlist: [], DYZlist2: [], DYZlistNum: 1, Progress: {}, numZt: 120, ztyc: false, citeL: '' } }, created() { console.log(this.cite.ztyc) this.cite.loadingSta = { sta: true, name: '页面重启中，请稍后' } this.toLoad() setInterval(() => { if (this.cite != this.citeL) { this.citeL = this.cite } if (this.code == '') { this.toLoad() } }, 3000) }, methods: { onCloneZt() { this.numZt = 0 this.onNum() }, onNum() { if (this.numZt == 0) { this.cite.ztyc = false this.DYZshow = false this.DYZlist = [] } else { this.numZt = this.numZt - 1 setTimeout(() => { this.onNum() }, 1000) } this.ztyc = this.cite.ztyc }, onChange(name, val) { this[name] = val }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } getDeviceCode().then(res => { this.cite.code = res.data this.code = res.data this.load() this.cite.loadingSta = { sta: false } }) }, load() { if (this.cite.facility === '') { this.getDeviceByCode() } // 判断是否是广告屏 if (this.cite.name != 'advertising') { this.initMqtt() setInterval(() => { if (!this.state.sta && this.cite.state.sta) { setTimeout(() => { this.cite.state.sta = false }, 3000) } this.state = this.cite.state }, 1000) } }, initMqtt() { // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: `tzdy-web::${this.cite.code}`, //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api //连接成功 this.client.on('connect', e => { console.log('连接成功', e) this.subscribes() }) //重连提醒 this.client.on('reconnect', error => { console.log('正在重连', error) }) //连接失败提醒 this.client.on('error', error => { console.log('连接失败', error) }) //接收消息 this.client.on('message', (topic, message) => { const data = JSON.parse(message) //接受到控制信号的数据 console.log('接收消息', data) if (data.cmd == 'HEARTBEAT') { if (data.deviceStatus == 'ABNORMAL' && this.DYZshow) { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } // 判断异常语音 if (data.abnormalReason !== undefined) { this.cite.serveError = true } else { this.cite.serveError = false } } else if (data.cmd == 'ORDER_INFO') { //小程序支付 this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length // 提示语音 // this.cite.url = data.payCodeUrl // if(this.cite.selectedFile.length<1) { // this.src = data.payCodeUrl // this.zfShow=true // } } else if (data.cmd == 'LOGIN') { //登录 } else if (data.cmd == 'LOGOUT') { //登出 } else if (data.cmd == 'PRINT') { //打印任务 // this.DYZshow = true // this.zfShow = false // this.DYZlist.push(data) // this.DYZlistNum = this.DYZlist.length } else if (data.cmd == 'PRINT_STATUS') { //打印任务完成 console.log(this.DYZlist) if (data.taskStatus == 'COMPLETE') { if (this.DYZlist.length > 1) { this.DYZlist.forEach((item, index) => { if (item.code == data.taskCode) { this.DYZlist.splice(index, 1) } }) } else { if (this.DYZshow) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.Progress = {} this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then(res => { this.cite.facility = res }) } } } else if (data.taskStatus == 'INTERRUPT') { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } } else if (data.cmd == 'PRINT_PROGRESS' && !this.cite.ztyc) { console.log(data) this.Progress = data if (data.rate == '99%') { setTimeout(() => { if (this.Progress.rate == '99%') { this.Progress.rate = '100%' } }, 1500) } } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/' + this.code] this.client.subscribe(arr, { qos: 0 }, err => { if (!err) { console.log(`消息订阅成功`) } else { console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { if (this.code) { getDeviceByCode({ code: this.code }).then(res => { console.log(res) this.cite.facility = res this.getAdvertisement() }) } }, // 获取广告链接 getAdvertisement() { let name = 'DeviceScreen' if (this.cite.name == 'advertising') { name = 'AdvertisingScreen' } getAdvertisement({ deviceId: this.cite.facility.id, screen: name }).then(res => { // console.log(res) this.cite.advertisement = res \|\| '' }) }, play() { console.log(this.$refs.audio) // if (addr !== '') { // console.log('12') // let music = new Audio() // music = addr // this.$refs.audio.src = music // } this.$refs.audio.play() } } } </script> <style scoped lang="less"> .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: -14.5rem; width: 38.56rem; height: 29rem; 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: 18rem; height: 3rem; margin: 1rem auto; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; } .JDT { width: 80%; margin: 1rem auto 0; height: 1rem; border-radius: 1rem; position: relative; border: 1px solid #323232; span { position: absolute; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); top: 0; left: 0; bottom: 0; } } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; z-index: 99; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } .loadingDH { position: absolute; top: 30%; width: 100%; .load { position: relative; margin: 3.125rem auto; width: 6.25rem; height: 5rem; .gear { position: absolute; z-index: -10; width: 2.5rem; height: 2.5rem; -webkit-animation: spin 5s infinite; animation: spin 5s infinite; } .second { left: 2.5rem; width: 5rem; height: 5rem; -webkit-animation: spin-reverse 5s infinite; animation: spin-reverse 5s infinite; } .third { top: 2.8125rem; left: -0.625rem; width: 3.75rem; height: 3.75rem; } @-webkit-keyframes spin { 50% { transform: rotate(360deg); } } @keyframes spin { 50% { transform: rotate(360deg); } } @-webkit-keyframes spin-reverse { 50% { transform: rotate(-360deg); } } @keyframes spin-reverse { 50% { transform: rotate(-360deg); } } .lil-circle { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white; width: 6.25rem; height: 6.25rem; opacity: 0.65; } .blur-circle { position: absolute; top: -1.1875rem; left: -1.1875rem; } } .text { color: lightgray; font-size: 1.125rem; font-family: 'Open Sans', sans-serif; text-align: center; padding-top: 3rem; } } </style>

Ignore Space Show notes View

src/components/global.vue

<template>
  <div>
    
    <div class="dyzTip" v-if="DYZshow && DYZlist">
      <div class="curtain"></div>
      <div class="content">
        <img src="../assets/printing.png" alt="" />
        <div v-if="ztyc" class="flex-center" style="padding: 0 0.3rem; margin: 0">
          小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。
        </div>
        
        <div v-else class="name">正在打印...</div>
        
        
        
        
        <div class="JDT"><span :style="'width:' + Progress.rate"></span></div>

<div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div>
      </div>
    </div>

<div class="tkTip flex-center" v-if="state.sta">
      <div>{{ state.name }}</div>
    </div>

<div class="dyzTip" v-if="zfShow">
      <div class="curtain"></div>
      <div class="content content2">
        <VueQr
          v-show="src"
          :auto-color="true"
          :dot-scale="1"
          :logo-src="require('@/assets/logo.png')"
          :logoMargin="0"
          :logoScale="0.2"
          :margin="0"
          :size="300"
          :text="src"
          logoBackgroundColor="white"
        ></VueQr>
        <p>
          <img @click="onChange('zfShow', false)" class="icon" src="../assets/demo10.png" alt="" />
        </p>
      </div>
    </div>

<div class="dyzTip" v-if="citeL.loadingSta.sta">
      <div class="curtain"></div>
      <div class="loadingDH">
        
        <div class="load">
          <div class="gear first">
            <svg id="purple" viewbox="0 0 100 100" fill="#afb4db">
              <path
                d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z"
              ></path>
            </svg>
          </div>
          <div class="gear second">
            <svg id="pink" viewbox="0 0 100 100" fill="#FFB5C5">
              <path
                d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z"
              ></path>
            </svg>
          </div>
          <div class="gear third">
            <svg id="orange" viewbox="0 0 100 100" fill="#fedcbd">
              <path
                d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z"
              ></path>
            </svg>
          </div>

<div class="lil-circle"></div>
          <svg class="blur-circle">
            <filter id="blur">
              <fegaussianblur in="SourceGraphic" stddeviation="13"></fegaussianblur>
            </filter>
            <circle cx="70" cy="70" r="66" fill="transparent" stroke="white" stroke-width="40" filter="url(#blur)"></circle>
          </svg>
        </div>
        
        <div class="text">{{ citeL.loadingSta.name }}</div>
      </div>
    </div>
    <audio ref="audio" class="aud">
      <source src="../assets/audio/Wait4Printing.mp3" />
    </audio>
  </div>
</template>
<script>
import mqtt from 'mqtt/dist/mqtt'
import { getAdvertisement, getDeviceByCode } from '@/api/resultApi'
import VueQr from 'vue-qr'
import { getDeviceCode } from '@/api/bdResultApi'

export default {
  name: 'global',
  components: {
    VueQr
  },
  data() {
    return {
      client: null,
      code: '',

DYZshow: false, // 是否显示打印中
      downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\',

state: {
        name: '',
        sta: false
      },

src: '',
      zfShow: false,

DYZlist: [],
      DYZlist2: [],
      DYZlistNum: 1,
      Progress: {},
      numZt: 120,
      ztyc: false,

citeL: {
        loadingSta: {
          sta: false,
          name: 'Loading'
        }
      }
    }
  },
  created() {
    console.log(this.cite.ztyc)
    this.cite.loadingSta = {
      sta: true,
      name: '页面重启中，请稍后'
    }
    this.toLoad()

setInterval(() => {
      if (this.cite != this.citeL) {
        this.citeL = this.cite
      }

if (this.code == '') {
        this.toLoad()
      }
    }, 3000)
  },
  methods: {
    onCloneZt() {
      this.numZt = 0
      this.onNum()
    },
    onNum() {
      if (this.numZt == 0) {
        this.cite.ztyc = false
        this.DYZshow = false
        this.DYZlist = []
      } else {
        this.numZt = this.numZt - 1
        setTimeout(() => {
          this.onNum()
        }, 1000)
      }
      this.ztyc = this.cite.ztyc
    },
    onChange(name, val) {
      this[name] = val
    },
    toLoad() {
      // this.cite.code = 'SNJ-XX-EPSON-X001-00001'
      // this.cite.code = 'TZLC001'
      // this.code = this.cite.code
      // this.load()
      // this.cite.loadingSta = {
      //   sta: false
      // }
      getDeviceCode().then(res => {
        if(this.code=='') {
          this.cite.code = res.data
          this.code = res.data
          this.load()
        }else{
          this.cite.code = res.data
          this.code = res.data
        }
        this.cite.loadingSta = {
          sta: false
        }
      })
    },
    load() {
      if (this.cite.facility === '') {
        this.getDeviceByCode()
      }
      // 判断是否是广告屏
      if (this.cite.name != 'advertising') {
        this.initMqtt()
        setInterval(() => {
          if (!this.state.sta && this.cite.state.sta) {
            setTimeout(() => {
              this.cite.state.sta = false
            }, 3000)
          }
          this.state = this.cite.state
        }, 1000)
      }
    },
    initMqtt() {
      let code = 'tzdy-web::'+this.code
      // 连接配置选项
      let options = {
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: code, //不填默认随机生成一个ID
        username: 'admin', //用户名
        password: 'public' //密码
      }
      this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api
      //连接成功
      this.client.on('connect', e => {
        console.log('连接成功', e)
        this.subscribes()
      })
      //重连提醒
      this.client.on('reconnect', error => {
        console.log('正在重连', error)
      })
      //连接失败提醒
      this.client.on('error', error => {
        console.log('连接失败', error)
      })
      //接收消息
      this.client.on('message', (topic, message) => {
        const data = JSON.parse(message) //接受到控制信号的数据
        console.log('接收消息', data)
        if (data.cmd == 'HEARTBEAT') {
          if (data.deviceStatus == 'ABNORMAL' && this.DYZshow) {
            if (!this.cite.ztyc) {
              this.numZt = 120
              this.onNum()
            }
            this.cite.ztyc = true
          }
          // 判断异常语音
          if (data.abnormalReason !== undefined) {
            this.cite.serveError = true
          } else {
            this.cite.serveError = false
          }
        } else if (data.cmd == 'ORDER_INFO') {
          //小程序支付
          this.DYZshow = true
          this.play()
          this.zfShow = false
          this.DYZlist = data.printTaskPushList
          this.DYZlist2 = data.printTaskPushList
          this.DYZlistNum = this.DYZlist.length
          // 提示语音

// this.cite.url = data.payCodeUrl
          // if(this.cite.selectedFile.length<1) {
          //   this.src = data.payCodeUrl
          //   this.zfShow=true
          // }
        } else if (data.cmd == 'LOGIN') {
          //登录
        } else if (data.cmd == 'LOGOUT') {
          //登出
        } else if (data.cmd == 'PRINT') {
          //打印任务
          // this.DYZshow = true
          // this.zfShow = false
          // this.DYZlist.push(data)
          // this.DYZlistNum = this.DYZlist.length
        } else if (data.cmd == 'PRINT_STATUS') {
          //打印任务完成
          console.log(this.DYZlist)
          if (data.taskStatus == 'COMPLETE') {
            if (this.DYZlist.length > 1) {
              this.DYZlist.forEach((item, index) => {
                if (item.code == data.taskCode) {
                  this.DYZlist.splice(index, 1)
                }
              })
            } else {
              if (this.DYZshow) {
                this.DYZshow = false
                this.DYZlist = []
                this.DYZlistNum = 1
                this.Progress = {}
                this.$router.push({
                  name: 'complete'
                })
                getDeviceByCode({ code: this.code }).then(res => {
                  this.cite.facility = res
                })
              }
            }
          } else if (data.taskStatus == 'INTERRUPT') {
            if (!this.cite.ztyc) {
              this.numZt = 120
              this.onNum()
            }
            this.cite.ztyc = true
          }
        } else if (data.cmd == 'PRINT_PROGRESS' && !this.cite.ztyc) {
          console.log(data)
          this.Progress = data
          if (data.rate == '99%') {
            setTimeout(() => {
              if (this.Progress.rate == '99%') {
                this.Progress.rate = '100%'
              }
            }, 1500)
          }
        }
      })
    },
    //订阅多个主题
    subscribes() {
      const arr = ['/tzdy/send/device/' + this.code]
      this.client.subscribe(arr, { qos: 0 }, err => {
        if (!err) {
          console.log(`消息订阅成功`)
        } else {
          console.log('消息订阅失败')
        }
      })
    },
    //获取设备信息
    getDeviceByCode() {
      if (this.code) {
        getDeviceByCode({ code: this.code }).then(res => {
          console.log(res)
          this.cite.facility = res
          this.getAdvertisement()
        })
      }
    },
    // 获取广告链接
    getAdvertisement() {
      let name = 'DeviceScreen'
      if (this.cite.name == 'advertising') {
        name = 'AdvertisingScreen'
      }
      getAdvertisement({ deviceId: this.cite.facility.id, screen: name }).then(res => {
        // console.log(res)
        this.cite.advertisement = res || ''
      })
    },
    play() {
      console.log(this.$refs.audio)
      // if (addr !== '') {
      //   console.log('12')
      //   let music = new Audio()
      //   music = addr
      //   this.$refs.audio.src = music
      // }
      this.$refs.audio.play()
    }
  }
}
</script>

.loadingDH {
  position: absolute;
  top: 30%;
  width: 100%;
  .load {
    position: relative;
    margin: 3.125rem auto;
    width: 6.25rem;
    height: 5rem;
    .gear {
      position: absolute;
      z-index: -10;
      width: 2.5rem;
      height: 2.5rem;
      -webkit-animation: spin 5s infinite;
      animation: spin 5s infinite;
    }
    .second {
      left: 2.5rem;
      width: 5rem;
      height: 5rem;
      -webkit-animation: spin-reverse 5s infinite;
      animation: spin-reverse 5s infinite;
    }
    .third {
      top: 2.8125rem;
      left: -0.625rem;
      width: 3.75rem;
      height: 3.75rem;
    }
    @-webkit-keyframes spin {
      50% {
        transform: rotate(360deg);
      }
    }
    @keyframes spin {
      50% {
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes spin-reverse {
      50% {
        transform: rotate(-360deg);
      }
    }
    @keyframes spin-reverse {
      50% {
        transform: rotate(-360deg);
      }
    }
    .lil-circle {
      position: absolute;
      border-radius: 50%;
      box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white;
      width: 6.25rem;
      height: 6.25rem;
      opacity: 0.65;
    }
    .blur-circle {
      position: absolute;
      top: -1.1875rem;
      left: -1.1875rem;
    }
  }
  .text {
    color: lightgray;
    font-size: 1.125rem;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding-top: 3rem;
  }
}
</style>

<div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div>
      </div>
    </div>

<div class="tkTip flex-center" v-if="state.sta">
      <div>{{ state.name }}</div>
    </div>

export default {
  name: 'global',
  components: {
    VueQr
  },
  data() {
    return {
      client: null,
      code: '',

DYZshow: false, // 是否显示打印中
      downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\',

state: '',

src: '',
      zfShow: false,

DYZlist: [],
      DYZlist2: [],
      DYZlistNum: 1,
      Progress: {},
      numZt: 120,
      ztyc: false,

citeL: ''
    }
  },
  created() {
    console.log(this.cite.ztyc)
    this.cite.loadingSta = {
      sta: true,
      name: '页面重启中，请稍后'
    }
    this.toLoad()

setInterval(() => {
      if (this.cite != this.citeL) {
        this.citeL = this.cite
      }

if (this.code == '') {
        this.toLoad()
      }
    }, 3000)
  },
  methods: {
    onCloneZt() {
      this.numZt = 0
      this.onNum()
    },
    onNum() {
      if (this.numZt == 0) {
        this.cite.ztyc = false
        this.DYZshow = false
        this.DYZlist = []
      } else {
        this.numZt = this.numZt - 1
        setTimeout(() => {
          this.onNum()
        }, 1000)
      }
      this.ztyc = this.cite.ztyc
    },
    onChange(name, val) {
      this[name] = val
    },
    toLoad() {
      // this.cite.code = 'SNJ-XX-EPSON-X001-00001'
      // this.cite.code = 'TZLC001'
      // this.code = this.cite.code
      // this.load()
      // this.cite.loadingSta = {
      //   sta: false
      // }
      getDeviceCode().then(res => {
        this.cite.code = res.data
        this.code = res.data
        this.load()
        this.cite.loadingSta = {
          sta: false
        }
      })
    },
    load() {
      if (this.cite.facility === '') {
        this.getDeviceByCode()
      }
      // 判断是否是广告屏
      if (this.cite.name != 'advertising') {
        this.initMqtt()
        setInterval(() => {
          if (!this.state.sta && this.cite.state.sta) {
            setTimeout(() => {
              this.cite.state.sta = false
            }, 3000)
          }
          this.state = this.cite.state
        }, 1000)
      }
    },
    initMqtt() {
      // 连接配置选项
      let options = {
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: `tzdy-web::${this.cite.code}`, //不填默认随机生成一个ID
        username: 'admin', //用户名
        password: 'public' //密码
      }
      this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api
      //连接成功
      this.client.on('connect', e => {
        console.log('连接成功', e)
        this.subscribes()
      })
      //重连提醒
      this.client.on('reconnect', error => {
        console.log('正在重连', error)
      })
      //连接失败提醒
      this.client.on('error', error => {
        console.log('连接失败', error)
      })
      //接收消息
      this.client.on('message', (topic, message) => {
        const data = JSON.parse(message) //接受到控制信号的数据
        console.log('接收消息', data)
        if (data.cmd == 'HEARTBEAT') {
          if (data.deviceStatus == 'ABNORMAL' && this.DYZshow) {
            if (!this.cite.ztyc) {
              this.numZt = 120
              this.onNum()
            }
            this.cite.ztyc = true
          }
          // 判断异常语音
          if (data.abnormalReason !== undefined) {
            this.cite.serveError = true
          } else {
            this.cite.serveError = false
          }
        } else if (data.cmd == 'ORDER_INFO') {
          //小程序支付
          this.DYZshow = true
          this.play()
          this.zfShow = false
          this.DYZlist = data.printTaskPushList
          this.DYZlist2 = data.printTaskPushList
          this.DYZlistNum = this.DYZlist.length
          // 提示语音

Ignore Space Show notes View src/views/selectFile.vue
<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" 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 width="640" height="900" ref="myCanvas" class="canvasSfz" 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%"></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> </template> <script> import navbar from '@/components/nav' import html2canvas from 'html2canvas' import { changeIdPhotoBgc, image2Pdf, images2Pdf } from '@/api/resultApi' import { readUsb, readFile, readCard } from '@/api/bdResultApi' import parseCardWzxx from '../utils/mz' 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: '' } }, created() { this.isVertical = this.cite.isVertical }, methods: { 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) 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) _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 }) 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.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.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas', window.devicePixelRatio) let sca = 0.38 // if (window.devicePixelRatio >= 1) { // sca = 0.7 // } const canvas = await html2canvas(captureArea, { scale: sca }) // 将 canvas 转为图片 URL const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) 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 // 监听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) } }, canvasSfz() { let _this = this let {cardInfo} = _this const canvas = this.$refs.myCanvas; 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, 640, 405) ctx.font = "24px OCR" // 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式 ctx.textBaseline = 'middle' ctx.fillStyle = "#333" ctx.fillText(cardInfo.xbmc, 120, 120) ctx.fillText(cardInfo.mzmc, 245, 120) let name = cardInfo.address let num = 11 let w = ctx.measureText(cardInfo.address).width if(w>500) { ctx.fillText(name, 210, 345) }else{ let t1 = name.substring(0, num); let t2 = name.substring(num); ctx.fillText(t1, 120, 220) ctx.fillText(t2, 120, 255) } ctx.font = "28px STHeiti" ctx.fillText(cardInfo.name, 120, 65) ctx.font = "26px OCR" ctx.fillText(cardInfo.birthday.substring(0, 4), 120, 170) if (cardInfo.birthday.substring(4, 5) == 0) { ctx.fillText(cardInfo.birthday.substring(5, 6), 220, 170) }else{ ctx.fillText(cardInfo.birthday.substring(4, 6), 210, 170) } if (cardInfo.birthday.substring(6, 7) == 0) { ctx.fillText(cardInfo.birthday.substring(7, 8), 280, 170) }else{ ctx.fillText(cardInfo.birthday.substring(6, 8), 270, 170) } let img2 = new Image() img2.src = _this.photo img2.onload = () => { ctx.drawImage(img2, 410, 60, 192, 238) let img3 = new Image() img3.src = require('@/assets/card1.png') img3.onload = () => { ctx.drawImage(img3, 0, 495, 640, 405) ctx.font = "28px STHeiti" ctx.fillText(cardInfo.issueOrg, 260, 797) ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), 260, 850) ctx.fillText('-', 405, 848) ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), 415, 850) canvas.style.letterSpacing = "2px"; ctx.font = "32px STHeiti" ctx.fillText(cardInfo.idNum, 210, 345) } } } }, 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 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() }) }, // 读取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, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if (this.$route.name == 'selectFile') { setTimeout(() => { this.readUsb() }, 1000) } }) }, // 处理选中文件 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) } }) }, async readFile(url, i) { let res = await readFile({ filePath: url }) 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; 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; } </style> <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" 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> <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%"></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> </template> <script> import navbar from '@/components/nav' import html2canvas from 'html2canvas' import { changeIdPhotoBgc, image2Pdf, images2Pdf } from '@/api/resultApi' import { readUsb, readFile, readCard } from '@/api/bdResultApi' import parseCardWzxx from '../utils/mz' 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: '' } }, created() { this.isVertical = this.cite.isVertical }, methods: { 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) 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) _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 }) 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.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.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas', window.devicePixelRatio) let sca = 0.38 // if (window.devicePixelRatio >= 1) { // sca = 0.7 // } const canvas = await html2canvas(captureArea, { scale: sca }) // 将 canvas 转为图片 URL const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) 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 // 监听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) } }, 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 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 }) }, // 读取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, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if (this.$route.name == 'selectFile') { setTimeout(() => { this.readUsb() }, 1000) } }) }, // 处理选中文件 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) } }) }, async readFile(url, i) { let res = await readFile({ filePath: url }) 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; 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; } </style>

Ignore Space Show notes View

src/views/selectFile.vue

<template>
  
  <div class="selectFile">
    <navbar :name="name" />
    
    <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" 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 width="640" height="900" ref="myCanvas" class="canvasSfz" 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>

UpFile: [],

cardInfo: '',

usbList: [],
      usbTime: '',
      usbNum: 0,
      isVertical: false,
      dialogVisible: false,
      pdfUrl: '',
      IsPreviewImg: false,
      previewImgs: ''
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  methods: {
    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)
          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)
        _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 })
      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.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.captureArea

// 使用 html2canvas 将区域内容生成为图片
      console.log('html2canvas', window.devicePixelRatio)
      let sca = 0.38
      // if (window.devicePixelRatio >= 1) {
      //   sca = 0.7
      // }
      const canvas = await html2canvas(captureArea, { scale: sca })

// 将 canvas 转为图片 URL
      const dataURL = canvas.toDataURL('image/png')
      const name = 'sfz.png'
      const file = this.dataURLtoFile(dataURL, name)
      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
        // 监听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)
      }
    },
    canvasSfz() {
      let _this = this
      let {cardInfo} = _this
      const canvas = this.$refs.myCanvas;
      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, 640, 405)

ctx.font = "24px OCR"
        // 更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
        ctx.textBaseline = 'middle'
        ctx.fillStyle = "#333"
        ctx.fillText(cardInfo.xbmc, 120, 120)
        ctx.fillText(cardInfo.mzmc, 245, 120)

let name = cardInfo.address
        let num = 11
        let w = ctx.measureText(cardInfo.address).width
        if(w>500) {
          ctx.fillText(name, 210, 345)
        }else{
          let t1 = name.substring(0, num);
          let t2 = name.substring(num);
          ctx.fillText(t1, 120, 220)
          ctx.fillText(t2, 120, 255)
        }

ctx.font = "28px STHeiti"
        ctx.fillText(cardInfo.name, 120, 65)

ctx.font = "26px OCR"
        ctx.fillText(cardInfo.birthday.substring(0, 4), 120, 170)
        if (cardInfo.birthday.substring(4, 5) == 0) {
          ctx.fillText(cardInfo.birthday.substring(5, 6), 220, 170)
        }else{
          ctx.fillText(cardInfo.birthday.substring(4, 6), 210, 170)
        }
        if (cardInfo.birthday.substring(6, 7) == 0) {
          ctx.fillText(cardInfo.birthday.substring(7, 8), 280, 170)
        }else{
          ctx.fillText(cardInfo.birthday.substring(6, 8), 270, 170)
        }

let img2 = new Image()
        img2.src = _this.photo
        img2.onload = () => {
          ctx.drawImage(img2, 410, 60, 192, 238)

let img3 = new Image()
          img3.src = require('@/assets/card1.png')
          img3.onload = () => {
            ctx.drawImage(img3, 0, 495, 640, 405)

ctx.font = "28px STHeiti"
            ctx.fillText(cardInfo.issueOrg, 260, 797)
            ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), 260, 850)
            ctx.fillText('-', 405, 848)
            ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), 415, 850)

canvas.style.letterSpacing = "2px";
            ctx.font = "32px STHeiti"
            ctx.fillText(cardInfo.idNum, 210, 345)
          }
        }
      }
    },
    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 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()
      })
    },
    // 读取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,
                sta: false
              })
            })
          }
        } else {
          this.UpFile = []
          this.usbList = []
          this.cite.state = {
            name: '请插入U盘',
            sta: true
          }
        }
        if (this.$route.name == 'selectFile') {
          setTimeout(() => {
            this.readUsb()
          }, 1000)
        }
      })
    },
    // 处理选中文件
    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)
        }
      })
    },
    async readFile(url, i) {
      let res = await readFile({ filePath: url })
      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>

// 竖屏
.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;
}
</style>

<template>
  
  <div class="selectFile">
    <navbar :name="name" />
    
    <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" 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>
      <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>

UpFile: [],

cardInfo: '',

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('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.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)
      }
    },

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 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
      })
    },
    // 读取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,
                sta: false
              })
            })
          }
        } else {
          this.UpFile = []
          this.usbList = []
          this.cite.state = {
            name: '请插入U盘',
            sta: true
          }
        }
        if (this.$route.name == 'selectFile') {
          setTimeout(() => {
            this.readUsb()
          }, 1000)
        }
      })
    },
    // 处理选中文件
    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)
        }
      })
    },
    async readFile(url, i) {
      let res = await readFile({ filePath: url })
      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>

Show line notes below