han

hanfei / VueSharedPrinting

Browse code han master
1 parent 2efaf84 commit 5b249ee2fb428ca0d14233938fcd63d837224f0e hanfei authored on 20 Mar 2024

Patch

Showing 7 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 v-if="state.name">{{ state.name }}</div> <div style="width: 50%;margin-top: 3%;" v-if="state.name2">{{ state.name2 }}</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' import alert from '../utils/alert' 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 } }).catch(error => {alert(error,this)}) }, load() { if (this.cite.facility === '') { this.getDeviceByCode() } // 判断是否是广告屏 if (this.cite.name != 'advertising') { this.initMqtt() setInterval(() => { if (!this.state.sta && this.cite.state.sta) { let time = 3000 if(this.cite.state.name2) { time = 6000 } setTimeout(() => { this.cite.state.sta = false }, time) } 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 }).catch(error => {alert(error,this)}) } } } 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() }).catch(error => {alert(error,this)}) } }, // 获取广告链接 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 \|\| '' }).catch(error => {alert(error,this)}) }, 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: { 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>

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 v-if="state.name">{{ state.name }}</div>
      <div style="width: 50%;margin-top: 3%;" v-if="state.name2">{{ state.name2 }}</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'
import alert from '../utils/alert'

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
        }
      }).catch(error => {alert(error,this)})
    },
    load() {
      if (this.cite.facility === '') {
        this.getDeviceByCode()
      }
      // 判断是否是广告屏
      if (this.cite.name != 'advertising') {
        this.initMqtt()
        setInterval(() => {
          if (!this.state.sta && this.cite.state.sta) {
            let time = 3000
            if(this.cite.state.name2) {
              time = 6000
            }
            setTimeout(() => {
              this.cite.state.sta = false
            }, time)
          }
          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
                }).catch(error => {alert(error,this)})
              }
            }
          } 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()
        }).catch(error => {alert(error,this)})
      }
    },
    // 获取广告链接
    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 || ''
      }).catch(error => {alert(error,this)})
    },
    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: {
        name: '',
        sta: false
      },

src: '',
      zfShow: false,

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

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>

Ignore Space Show notes View src/utils/alert.js 0 → 100644
import cite from './cite' function alert(error,that) { if (error.response) { // 服务器返回了错误响应，处理状态码等 // console.log('服务器返回了错误响应，处理状态码等',error.response) } else if (error.request) { // 没有收到任何响应，网络错误等 // console.log('没有收到任何响应，网络错误等',error.request) cite.fileNum = 0 cite.loadingSta = { sta: false } cite.state = { name2: '尊敬的用户您好，很抱歉打印应用检测到当前网络响应缓慢，您之前的请求未能正常送达，请您重新尝试发送请求或稍后再试，不便之处敬请谅解。您可以联系管理员，检查网络和设备情况。', sta: true } setTimeout(()=>{ that.$router.push({ name: 'device' }) },3000) } else { // 其他错误 // console.log('Error其他错误', error.message) } } export default alert ;

Ignore Space Show notes View

src/utils/alert.js 0 → 100644

Ignore Space Show notes View src/utils/cite.js
// 引用地址 let inWebURL = 'ws://127.0.0.1:7000/' let baseURL = 'http://127.0.0.1' // let baseURL = "http://192.168.250.110"; // 刘竞 // let baseURL = "http://192.168.250.29"; // 家亮 // 记录首页名称 let name = '' // 设备编号 let code = '' // 用户信息 let memberLoginVo = '' // 设备信息 let facility = '' // 选中的文件 let selectedFile = [] // 选中的文件数 let fileNum = 0 // 打印的参数 let parameter = '' // 订单id let orderId = '' // 广告位 let advertisement = '' // 页面停留时间(秒) let tlTime = { djs: 5 * 60, //倒计时时间 mrT: 5 * 60 //默认时间 } let url = '' // 打印方式名称 let modeName = '' // 提示的内容及状态 let state = { name: '', name2: '', sta: false } // 打印数据 let printData = '' //异常提醒状态 let ztyc = false // loading提醒 let loadingSta = { sta: false, name: 'Loading' } // 判断是否是竖屏默认不是 let isVertical = false // 判断语音是否正常 let serveError = false export default { loadingSta, ztyc, printData, state, modeName, url, inWebURL, baseURL, facility, selectedFile, fileNum, parameter, orderId, code, memberLoginVo, name, advertisement, tlTime, isVertical, serveError } // 引用地址 let inWebURL = 'ws://127.0.0.1:7000/' let baseURL = 'http://127.0.0.1' // let baseURL = "http://192.168.250.110"; // 刘竞 // let baseURL = "http://192.168.250.29"; // 家亮 // 记录首页名称 let name = '' // 设备编号 let code = '' // 用户信息 let memberLoginVo = '' // 设备信息 let facility = '' // 选中的文件 let selectedFile = [] // 选中的文件数 let fileNum = 0 // 打印的参数 let parameter = '' // 订单id let orderId = '' // 广告位 let advertisement = '' // 页面停留时间(秒) let tlTime = { djs: 5 * 60, //倒计时时间 mrT: 5 * 60 //默认时间 } let url = '' // 打印方式名称 let modeName = '' // 提示的内容及状态 let state = { name: '', sta: false } // 打印数据 let printData = '' //异常提醒状态 let ztyc = false // loading提醒 let loadingSta = { sta: false, name: 'Loading' } // 判断是否是竖屏默认不是 let isVertical = false // 判断语音是否正常 let serveError = false export default { loadingSta, ztyc, printData, state, modeName, url, inWebURL, baseURL, facility, selectedFile, fileNum, parameter, orderId, code, memberLoginVo, name, advertisement, tlTime, isVertical, serveError }

Ignore Space Show notes View

src/utils/cite.js

// 引用地址
let inWebURL = 'ws://127.0.0.1:7000/'
let baseURL = 'http://127.0.0.1'
// let baseURL = "http://192.168.250.110"; // 刘竞
// let baseURL = "http://192.168.250.29"; // 家亮

// 记录首页名称
let name = ''
// 设备编号
let code = ''
// 用户信息
let memberLoginVo = ''
// 设备信息
let facility = ''
// 选中的文件
let selectedFile = []
// 选中的文件数
let fileNum = 0
// 打印的参数
let parameter = ''
// 订单id
let orderId = ''
// 广告位
let advertisement = ''
// 页面停留时间(秒)
let tlTime = {
  djs: 5 * 60, //倒计时时间
  mrT: 5 * 60 //默认时间
}
let url = ''

// 打印方式名称
let modeName = ''
// 提示的内容及状态
let state = {
  name: '',
  name2: '',
  sta: false
}
// 打印数据
let printData = ''
//异常提醒状态
let ztyc = false
// loading提醒
let loadingSta = {
  sta: false,
  name: 'Loading'
}
// 判断是否是竖屏 默认不是
let isVertical = false
// 判断语音是否正常
let serveError = false
export default {
  loadingSta,
  ztyc,
  printData,
  state,
  modeName,
  url,
  inWebURL,
  baseURL,
  facility,
  selectedFile,
  fileNum,
  parameter,
  orderId,
  code,
  memberLoginVo,
  name,
  advertisement,
  tlTime,
  isVertical,
  serveError
}

// 引用地址
let inWebURL = 'ws://127.0.0.1:7000/'
let baseURL = 'http://127.0.0.1'
// let baseURL = "http://192.168.250.110"; // 刘竞
// let baseURL = "http://192.168.250.29"; // 家亮

// 打印方式名称
let modeName = ''
// 提示的内容及状态
let state = {
  name: '',
  sta: false
}
// 打印数据
let printData = ''
//异常提醒状态
let ztyc = false
// loading提醒
let loadingSta = {
  sta: false,
  name: 'Loading'
}
// 判断是否是竖屏 默认不是
let isVertical = false
// 判断语音是否正常
let serveError = false
export default {
  loadingSta,
  ztyc,
  printData,
  state,
  modeName,
  url,
  inWebURL,
  baseURL,
  facility,
  selectedFile,
  fileNum,
  parameter,
  orderId,
  code,
  memberLoginVo,
  name,
  advertisement,
  tlTime,
  isVertical,
  serveError
}

Ignore Space Show notes View src/views/expense.vue
<template> <!-- 费用支付--> <div class="expense"> <navbar :name="name" /> <div :class="['box', 'flex-center', { 'vertical-box-colum': isVertical }]"> <div :class="['left', { 'vertical-box': isVertical }]"> <div class="title">温馨提示</div> <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div> </div> <div :class="['right', { 'vertical-box': isVertical }]"> <div class="code"> <VueQr v-if="appSrc != ''" :logo-src="require('@/assets/logo.png')" :logoScale="0.2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc" ></VueQr> </div> <div class="flex-center tip">提示：请在 {{ num }} 秒内完成扫码支付</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Remind2Pay.mp3" autoplay /> </audio> </div> </template> <script> import navbar from '@/components/nav' // import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import { downloadPDF, getPrintTask } from '../api/resultApi' import VueQr from 'vue-qr' import bdRequest from '../utils/bdRequest' import alert from "@/utils/alert"; export default { name: 'expense', components: { navbar, VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, appSrc: '', client: '', num: 120, selectedFile: this.cite.selectedFile, listData: { code: '20240104231724631239-0', copies: 1, printFileId: 112, printFileType: 'PDF', printingColor: 'BW', printingFaces: 'SINGLE' }, isVertical: false } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name } }) }, downloadPDF(id, name) { downloadPDF({ id: id }) .then(res => { const fileName = name const blob = new Blob([res], { type: 'application/octet-stream' }) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }).catch(error => {alert(error,this)}) }, async dayin() { let _this = this let { listData, selectedFile } = _this let i = '', deta = '' selectedFile.forEach((item, index) => { if (listData.printFileId == item.id) { i = index deta = item } }) await this.downloadPDF(listData.printFileId, listData.printFileName) console.log('打印', deta, listData.copies) setTimeout(() => { _this.selectedFile.splice(i, 1) // 按份数循环打印 // for(let i=0;i<listData.copies;i++) { // } let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { PrinterName: 'EPSON WF-C5890 Series', // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, SourceFile: 'C:\\datasource\\' + listData.printFileName, FileType: 'pdf', PrintColor: listData.printingColor \|\| '', DblPrt: listData.printingFaces \|\| '' } }) console.log(res) setTimeout(() => { if (_this.selectedFile.length > 0) { _this.getPrintTask() } else { _this.cite.orderId = '' _this.skip('complete', _this.name) } }, 1000) }, 2000) }, async getPrintTask() { let _this = this if (_this.cite.orderId) { let res = await getPrintTask({ orderId: _this.cite.orderId }) console.log(res, 'getPrintTask数据') if (res) { _this.listData = res _this.dayin() } else { setTimeout(() => { _this.getPrintTask() }, 1000) } } }, load() { let _this = this setTimeout(() => { _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) }, 800) // getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => { // // console.log(res.data.qrCode) // if(res.qrCode) { // // _this.appSrc = res.qrCode // // _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) // // 循环查询是否需要调打印 // // setTimeout(() =>{ // // // _this.dayin() // // _this.getPrintTask() // // },1000) // } // }) }, countDown() { if (this.$route.name == 'expense') { let num = this.num if (num == 0) { this.quit() return } else if (num > 0) { setTimeout(() => { this.num = num - 1 this.countDown() }, 1000) } } }, play() { this.$refs.audio.play() } }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.play() this.num = 120 this.countDown() this.load() } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #ffffff; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } .vertical-box { width: 80% !important; height: 35rem !important; } .vertical-box-colum { height: 90rem; flex-direction: column-reverse; justify-content: space-around; align-items: center; } </style> <template> <!-- 费用支付--> <div class="expense"> <navbar :name="name" /> <div :class="['box', 'flex-center', { 'vertical-box-colum': isVertical }]"> <div :class="['left', { 'vertical-box': isVertical }]"> <div class="title">温馨提示</div> <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div> </div> <div :class="['right', { 'vertical-box': isVertical }]"> <div class="code"> <VueQr v-if="appSrc != ''" :logo-src="require('@/assets/logo.png')" :logoScale="0.2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc" ></VueQr> </div> <div class="flex-center tip">提示：请在 {{ num }} 秒内完成扫码支付</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Remind2Pay.mp3" autoplay /> </audio> </div> </template> <script> import navbar from '@/components/nav' // import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import { downloadPDF, getPrintTask } from '../api/resultApi' import VueQr from 'vue-qr' import bdRequest from '../utils/bdRequest' export default { name: 'expense', components: { navbar, VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, appSrc: '', client: '', num: 120, selectedFile: this.cite.selectedFile, listData: { code: '20240104231724631239-0', copies: 1, printFileId: 112, printFileType: 'PDF', printingColor: 'BW', printingFaces: 'SINGLE' }, isVertical: false } }, methods: { skip(href, name) { this.$router.push({ name: href, params: { name: name } }) }, downloadPDF(id, name) { downloadPDF({ id: id }) .then(res => { const fileName = name const blob = new Blob([res], { type: 'application/octet-stream' }) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }) .catch(() => {}) }, async dayin() { let _this = this let { listData, selectedFile } = _this let i = '', deta = '' selectedFile.forEach((item, index) => { if (listData.printFileId == item.id) { i = index deta = item } }) await this.downloadPDF(listData.printFileId, listData.printFileName) console.log('打印', deta, listData.copies) setTimeout(() => { _this.selectedFile.splice(i, 1) // 按份数循环打印 // for(let i=0;i<listData.copies;i++) { // } let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { PrinterName: 'EPSON WF-C5890 Series', // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName, SourceFile: 'C:\\datasource\\' + listData.printFileName, FileType: 'pdf', PrintColor: listData.printingColor \|\| '', DblPrt: listData.printingFaces \|\| '' } }) console.log(res) setTimeout(() => { if (_this.selectedFile.length > 0) { _this.getPrintTask() } else { _this.cite.orderId = '' _this.skip('complete', _this.name) } }, 1000) }, 2000) }, async getPrintTask() { let _this = this if (_this.cite.orderId) { let res = await getPrintTask({ orderId: _this.cite.orderId }) console.log(res, 'getPrintTask数据') if (res) { _this.listData = res _this.dayin() } else { setTimeout(() => { _this.getPrintTask() }, 1000) } } }, load() { let _this = this setTimeout(() => { _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) }, 800) // getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => { // // console.log(res.data.qrCode) // if(res.qrCode) { // // _this.appSrc = res.qrCode // // _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData) // // 循环查询是否需要调打印 // // setTimeout(() =>{ // // // _this.dayin() // // _this.getPrintTask() // // },1000) // } // }) }, countDown() { if (this.$route.name == 'expense') { let num = this.num if (num == 0) { this.quit() return } else if (num > 0) { setTimeout(() => { this.num = num - 1 this.countDown() }, 1000) } } }, play() { this.$refs.audio.play() } }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.play() this.num = 120 this.countDown() this.load() } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #ffffff; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } .vertical-box { width: 80% !important; height: 35rem !important; } .vertical-box-colum { height: 90rem; flex-direction: column-reverse; justify-content: space-around; align-items: center; } </style>

Ignore Space Show notes View

src/views/expense.vue

<template>
  
  <div class="expense">
    <navbar :name="name" />
    <div :class="['box', 'flex-center', { 'vertical-box-colum': isVertical }]">
      <div :class="['left', { 'vertical-box': isVertical }]">
        <div class="title">温馨提示</div>
        <div class="content">请在二维码区域提示的时限内，尽快完成支付。如果操作超时，本次打印业务可能需要重新提交。</div>
      </div>
      <div :class="['right', { 'vertical-box': isVertical }]">
        <div class="code">
          <VueQr
            v-if="appSrc != ''"
            :logo-src="require('@/assets/logo.png')"
            :logoScale="0.2"
            :logoMargin="0"
            logoBackgroundColor="white"
            :size="300"
            :margin="0"
            :auto-color="true"
            :dot-scale="1"
            :text="appSrc"
          ></VueQr>
        </div>
        <div class="flex-center tip">提示：请在 {{ num }} 秒内完成扫码支付</div>
      </div>
    </div>
    <audio ref="audio" class="aud">
      <source src="../assets/audio/Remind2Pay.mp3" autoplay />
    </audio>
  </div>
</template>

export default {
  name: 'expense',
  components: {
    navbar,
    VueQr
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      appSrc: '',
      client: '',
      num: 120,

selectedFile: this.cite.selectedFile,
      listData: {
        code: '20240104231724631239-0',
        copies: 1,
        printFileId: 112,
        printFileType: 'PDF',
        printingColor: 'BW',
        printingFaces: 'SINGLE'
      },
      isVertical: false
    }
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    downloadPDF(id, name) {
      downloadPDF({ id: id })
        .then(res => {
          const fileName = name
          const blob = new Blob([res], { type: 'application/octet-stream' })
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName)
          } else {
            let link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(link.href)
          }
        }).catch(error => {alert(error,this)})
    },
    async dayin() {
      let _this = this
      let { listData, selectedFile } = _this
      let i = '',
        deta = ''
      selectedFile.forEach((item, index) => {
        if (listData.printFileId == item.id) {
          i = index
          deta = item
        }
      })
      await this.downloadPDF(listData.printFileId, listData.printFileName)
      console.log('打印', deta, listData.copies)
      setTimeout(() => {
        _this.selectedFile.splice(i, 1)
        // 按份数循环打印
        // for(let i=0;i<listData.copies;i++) {
        // }

let res = bdRequest({
          method: 'post',
          url: '/api/Printer/Print',
          post: '8080',
          data: {
            PrinterName: 'EPSON WF-C5890 Series',
            // "SourceFile": 'D:\\TZDYSHARE\\TEMPFILES\\'+listData.printFileName,
            SourceFile: 'C:\\datasource\\' + listData.printFileName,
            FileType: 'pdf',
            PrintColor: listData.printingColor || '',
            DblPrt: listData.printingFaces || ''
          }
        })
        console.log(res)

setTimeout(() => {
          if (_this.selectedFile.length > 0) {
            _this.getPrintTask()
          } else {
            _this.cite.orderId = ''
            _this.skip('complete', _this.name)
          }
        }, 1000)
      }, 2000)
    },
    async getPrintTask() {
      let _this = this
      if (_this.cite.orderId) {
        let res = await getPrintTask({ orderId: _this.cite.orderId })
        console.log(res, 'getPrintTask数据')
        if (res) {
          _this.listData = res
          _this.dayin()
        } else {
          setTimeout(() => {
            _this.getPrintTask()
          }, 1000)
        }
      }
    },
    load() {
      let _this = this

setTimeout(() => {
        _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      }, 800)

// getPayQrCode({orderId: _this.cite.orderId,payMode: 'TZ_PAY'}).then(res => {
      //   // console.log(res.data.qrCode)
      //   if(res.qrCode) {
      //     // _this.appSrc = res.qrCode
      //
      //     _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      //     // 循环查询是否需要调打印
      //     // setTimeout(() =>{
      //     //   // _this.dayin()
      //     //   _this.getPrintTask()
      //     // },1000)
      //   }
      // })
    },
    countDown() {
      if (this.$route.name == 'expense') {
        let num = this.num
        if (num == 0) {
          this.quit()
          return
        } else if (num > 0) {
          setTimeout(() => {
            this.num = num - 1
            this.countDown()
          }, 1000)
        }
      }
    },
    play() {
      this.$refs.audio.play()
    }
  },
  destroyed() {
    // 销毁监听
    // clearTimeout()
    this.num = -1
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    this.play()
    this.num = 120
    this.countDown()
    this.load()
  }
}
</script>

selectedFile: this.cite.selectedFile,
      listData: {
        code: '20240104231724631239-0',
        copies: 1,
        printFileId: 112,
        printFileType: 'PDF',
        printingColor: 'BW',
        printingFaces: 'SINGLE'
      },
      isVertical: false
    }
  },
  methods: {
    skip(href, name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    downloadPDF(id, name) {
      downloadPDF({ id: id })
        .then(res => {
          const fileName = name
          const blob = new Blob([res], { type: 'application/octet-stream' })
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName)
          } else {
            let link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(link.href)
          }
        })
        .catch(() => {})
    },
    async dayin() {
      let _this = this
      let { listData, selectedFile } = _this
      let i = '',
        deta = ''
      selectedFile.forEach((item, index) => {
        if (listData.printFileId == item.id) {
          i = index
          deta = item
        }
      })
      await this.downloadPDF(listData.printFileId, listData.printFileName)
      console.log('打印', deta, listData.copies)
      setTimeout(() => {
        _this.selectedFile.splice(i, 1)
        // 按份数循环打印
        // for(let i=0;i<listData.copies;i++) {
        // }

setTimeout(() => {
        _this.appSrc = 'https://mps.xlmalls.com/web/payment/' + JSON.stringify(_this.cite.printData)
      }, 800)

Ignore Space Show notes View src/views/explain.vue
<template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '价格查询'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描打印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0"> <!-- 表格中一行的内容 --> <tr class="bg-header"> <!-- 表格中单个单元格内容 --> <!-- <td>打印类型&格式</td> <td>单价</td> --> </tr> <tr :class="index === 0 ? 'bg-header' : ''" v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}/元</td> </tr> </table> </div> <div v-if="name == '联系客服'"> <div class="content">尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话18873278787，我们将为您提供耐心解答和及时帮助，谢谢。</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import { getPrintPriceList } from '../api/resultApi' import alert from "@/utils/alert"; export default { name: 'explain', components: { navbar }, provide() { return { title: this.name, type: '' } }, data() { return { name: this.$route.params.name, tableData: [] } }, methods: { getPrintPrice() { getPrintPriceList({ deviceId: this.cite.facility.id }).then(res => { this.tableData = [{ name: '打印类型&格式', amount: '单价' }, ...res] }).catch(error => {alert(error,this)}) } }, created() { this.getPrintPrice() }, mounted() {} } </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } .bg-header { font-weight: bold; font-size: 1.3rem; background-color: #edeff6; } } } </style> <template> <!--说明--> <div class="explain"> <navbar :name="name" /> <div class="box"> <div v-if="name == '使用教程'"> <div class="content"> 使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程 </div> </div> <div v-if="name == '价格查询'" class="flex-center"> <!-- <div class="content">A4纸[文件打印、扫描打印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div> <div class="content">6寸相纸/热升华相纸 [照片、证件照打印]:证件照: XXX 元/ 张(版)照片: XXX元/张</div> --> <!-- 整个表格内容 --> <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0"> <!-- 表格中一行的内容 --> <tr class="bg-header"> <!-- 表格中单个单元格内容 --> <!-- <td>打印类型&格式</td> <td>单价</td> --> </tr> <tr :class="index === 0 ? 'bg-header' : ''" v-for="(item, index) in tableData" :key="index"> <td>{{ item.name }}</td> <td>{{ item.amount }}/元</td> </tr> </table> </div> <div v-if="name == '联系客服'"> <div class="content">尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话18873278787，我们将为您提供耐心解答和及时帮助，谢谢。</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import { getPrintPriceList } from '../api/resultApi' export default { name: 'explain', components: { navbar }, provide() { return { title: this.name, type: '' } }, data() { return { name: this.$route.params.name, tableData: [] } }, methods: { getPrintPrice() { getPrintPriceList({ deviceId: this.cite.facility.id }).then(res => { this.tableData = [{ name: '打印类型&格式', amount: '单价' }, ...res] }) } }, created() { this.getPrintPrice() }, mounted() {} } </script> <style scoped lang="less"> .explain { .box { width: 114.06rem; height: 32rem; padding: 6rem 0; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; > div { height: 100%; overflow-y: auto; } .content { width: 93.81rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.1rem; margin: 0 auto; text-align: left; } .bg-header { font-weight: bold; font-size: 1.3rem; background-color: #edeff6; } } } </style>

Ignore Space Show notes View

src/views/explain.vue

<template>
  
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '价格查询'" class="flex-center">
        
        
        <table border="1" width="500" height="100%" align="center" cellpadding="10" cellspacing="0">
          
          <tr class="bg-header">
            
            
          </tr>
          <tr :class="index === 0 ? 'bg-header' : ''" v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.amount }}/元</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '联系客服'">
        <div class="content">尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话18873278787，我们将为您提供耐心解答和及时帮助，谢谢。</div>
      </div>
    </div>
  </div>
</template>

Ignore Space Show notes View src/views/pay.vue
<template> <!--支付确认--> <div class="pay"> <navbar :name="name" /> <div :class="['box', { 'vertical-box-width': isVertical }]"> <div class="flex-start name"> <img src="../assets/demo11.png" alt="" /> <span>文件 x{{ selectedFile.length }}</span> </div> <div :class="['info', 'flex-start', { 'vertical-box-width0': isVertical }]"> {{ parameter.specification }}，{{ parameter.printingColor == 'BW' ? '黑白' : '彩色' }}，{{ parameter.printingFaces == 'SINGLE' ? '单面' : '双面' }}，{{ parameter.copies }}份 </div> </div> <div :class="['box2', 'flex-between', { 'vertical-box-btn': isVertical }]"> <div class="flex-start price" v-if="price != ''"> <span>费用合计：</span> <div>￥{{ price }}</div> </div> <span v-else>文件正在处理中，请稍后!</span> <div class="flex-center btn" @click="skip('expense', name)">确认支付</div> </div> </div> </template> <script> import navbar from '@/components/nav' import { getPrintPrice } from '../api/resultApi' import alert from "@/utils/alert"; // import {getPrintPrice,submitPrintingTask} from "../api/resultApi"; export default { name: 'pay', components: { navbar }, provide() { return { title: '支付', type: this.name } }, data() { return { name: this.cite.modeName, facility: this.cite.facility, selectedFile: this.cite.selectedFile, parameter: this.cite.parameter, price: '', num: 0, isVertical: false } }, methods: { async submitPrintingTask() { let _this = this let { parameter, facility, selectedFile } = _this let taskList = [] selectedFile.forEach(item => { taskList.push({ printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: item.id }) }) let data = { deviceId: facility.id, // payMode: 'WX_NATIVE_PAY', payMode: 'WX_JS_PAY', taskList: taskList } _this.cite.printData = data // let res = await submitPrintingTask(data) // _this.cite.orderId = res }, async skip(href, name) { if (this.num > 0) { this.cite.state = { name: '加载中，请稍后！', sta: true } return } await this.submitPrintingTask() this.$router.push({ name: href, params: { name: name } }) }, async getPrintPrice(id) { let _this = this let { parameter, facility } = _this let data = { deviceId: facility.id, printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: id } let res = await getPrintPrice(data).catch(error => {alert(error,this)}) if (_this.price == '') { _this.price = 0 } _this.price = (parseFloat(res * 1000) + _this.price * 1000) / 1000 _this.num = _this.num - 1 }, load() { let { selectedFile } = this this.num = selectedFile.length selectedFile.forEach(item => { this.getPrintPrice(item.id) }) } }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.price = '' this.load() } } </script> <style scoped lang="less"> .pay { .css1 { width: 105.43rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; padding: 0 2.69rem; } .box { height: 23rem; .css1(); margin-bottom: 2.5rem; .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; padding: 3.25rem 0 2.56rem; img { width: 3.66rem; margin-right: 1.63rem; } } .info { width: 97.94rem; height: 9.44rem; background: #f6f6f6; border-radius: 1.63rem; font-size: 2.13rem; font-weight: bold; color: #989898; line-height: 3rem; padding: 0 3.75rem; } } .box2 { height: 12.44rem; .css1(); .price { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; align-items: flex-end; div { font-size: 4.13rem; font-weight: bold; color: #d51919; line-height: 5rem; margin-left: 3rem; } } .btn { width: 51.13rem; 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; } } } .vertical-box-width { width: 87% !important; } .vertical-box-width0 { width: auto !important; } .vertical-box-btn { width: 87% !important; height: 14.44rem !important; padding: 2rem 2.69rem !important; flex-direction: column !important; } </style> <template> <!--支付确认--> <div class="pay"> <navbar :name="name" /> <div :class="['box', { 'vertical-box-width': isVertical }]"> <div class="flex-start name"> <img src="../assets/demo11.png" alt="" /> <span>文件 x{{ selectedFile.length }}</span> </div> <div :class="['info', 'flex-start', { 'vertical-box-width0': isVertical }]"> {{ parameter.specification }}，{{ parameter.printingColor == 'BW' ? '黑白' : '彩色' }}，{{ parameter.printingFaces == 'SINGLE' ? '单面' : '双面' }}，{{ parameter.copies }}份 </div> </div> <div :class="['box2', 'flex-between', { 'vertical-box-btn': isVertical }]"> <div class="flex-start price" v-if="price != ''"> <span>费用合计：</span> <div>￥{{ price }}</div> </div> <span v-else>文件正在处理中，请稍后!</span> <div class="flex-center btn" @click="skip('expense', name)">确认支付</div> </div> </div> </template> <script> import navbar from '@/components/nav' import { getPrintPrice } from '../api/resultApi' // import {getPrintPrice,submitPrintingTask} from "../api/resultApi"; export default { name: 'pay', components: { navbar }, provide() { return { title: '支付', type: this.name } }, data() { return { name: this.cite.modeName, facility: this.cite.facility, selectedFile: this.cite.selectedFile, parameter: this.cite.parameter, price: '', num: 0, isVertical: false } }, methods: { async submitPrintingTask() { let _this = this let { parameter, facility, selectedFile } = _this let taskList = [] selectedFile.forEach(item => { taskList.push({ printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: item.id }) }) let data = { deviceId: facility.id, // payMode: 'WX_NATIVE_PAY', payMode: 'WX_JS_PAY', taskList: taskList } _this.cite.printData = data // let res = await submitPrintingTask(data) // _this.cite.orderId = res }, async skip(href, name) { if (this.num > 0) { this.cite.state = { name: '加载中，请稍后！', sta: true } return } await this.submitPrintingTask() this.$router.push({ name: href, params: { name: name } }) }, async getPrintPrice(id) { let _this = this let { parameter, facility } = _this let data = { deviceId: facility.id, printType: 'DocumentPrinting', copies: parameter.copies, printDirection: 'VERTICAL', printingColor: parameter.printingColor, printingFaces: parameter.printingFaces, fileId: id } let res = await getPrintPrice(data) if (_this.price == '') { _this.price = 0 } _this.price = (parseFloat(res * 1000) + _this.price * 1000) / 1000 _this.num = _this.num - 1 }, load() { let { selectedFile } = this this.num = selectedFile.length selectedFile.forEach(item => { this.getPrintPrice(item.id) }) } }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.price = '' this.load() } } </script> <style scoped lang="less"> .pay { .css1 { width: 105.43rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; padding: 0 2.69rem; } .box { height: 23rem; .css1(); margin-bottom: 2.5rem; .name { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; padding: 3.25rem 0 2.56rem; img { width: 3.66rem; margin-right: 1.63rem; } } .info { width: 97.94rem; height: 9.44rem; background: #f6f6f6; border-radius: 1.63rem; font-size: 2.13rem; font-weight: bold; color: #989898; line-height: 3rem; padding: 0 3.75rem; } } .box2 { height: 12.44rem; .css1(); .price { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; align-items: flex-end; div { font-size: 4.13rem; font-weight: bold; color: #d51919; line-height: 5rem; margin-left: 3rem; } } .btn { width: 51.13rem; 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; } } } .vertical-box-width { width: 87% !important; } .vertical-box-width0 { width: auto !important; } .vertical-box-btn { width: 87% !important; height: 14.44rem !important; padding: 2rem 2.69rem !important; flex-direction: column !important; } </style>

Ignore Space Show notes View

src/views/pay.vue

<template>
  
  <div class="pay">
    <navbar :name="name" />
    <div :class="['box', { 'vertical-box-width': isVertical }]">
      <div class="flex-start name">
        <img src="../assets/demo11.png" alt="" />
        <span>文件 x{{ selectedFile.length }}</span>
      </div>
      <div :class="['info', 'flex-start', { 'vertical-box-width0': isVertical }]">
        {{ parameter.specification }}，{{ parameter.printingColor == 'BW' ? '黑白' : '彩色' }}，{{ parameter.printingFaces == 'SINGLE' ? '单面' : '双面' }}，{{ parameter.copies }}份
      </div>
    </div>
    <div :class="['box2', 'flex-between', { 'vertical-box-btn': isVertical }]">
      <div class="flex-start price" v-if="price != ''">
        <span>费用合计：</span>
        <div>￥{{ price }}</div>
      </div>
      <span v-else>文件正在处理中，请稍后!</span>
      <div class="flex-center btn" @click="skip('expense', name)">确认支付</div>
    </div>
  </div>
</template>

export default {
  name: 'pay',
  components: {
    navbar
  },
  provide() {
    return {
      title: '支付',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      facility: this.cite.facility,
      selectedFile: this.cite.selectedFile,
      parameter: this.cite.parameter,
      price: '',
      num: 0,
      isVertical: false
    }
  },
  methods: {
    async submitPrintingTask() {
      let _this = this
      let { parameter, facility, selectedFile } = _this
      let taskList = []
      selectedFile.forEach(item => {
        taskList.push({
          printType: 'DocumentPrinting',
          copies: parameter.copies,
          printDirection: 'VERTICAL',
          printingColor: parameter.printingColor,
          printingFaces: parameter.printingFaces,
          fileId: item.id
        })
      })
      let data = {
        deviceId: facility.id,
        // payMode: 'WX_NATIVE_PAY',
        payMode: 'WX_JS_PAY',
        taskList: taskList
      }
      _this.cite.printData = data
      // let res = await submitPrintingTask(data)
      // _this.cite.orderId = res
    },
    async skip(href, name) {
      if (this.num > 0) {
        this.cite.state = {
          name: '加载中，请稍后！',
          sta: true
        }
        return
      }
      await this.submitPrintingTask()

this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    async getPrintPrice(id) {
      let _this = this
      let { parameter, facility } = _this
      let data = {
        deviceId: facility.id,
        printType: 'DocumentPrinting',
        copies: parameter.copies,
        printDirection: 'VERTICAL',
        printingColor: parameter.printingColor,
        printingFaces: parameter.printingFaces,
        fileId: id
      }
      let res = await getPrintPrice(data).catch(error => {alert(error,this)})
      if (_this.price == '') {
        _this.price = 0
      }
      _this.price = (parseFloat(res * 1000) + _this.price * 1000) / 1000
      _this.num = _this.num - 1
    },
    load() {
      let { selectedFile } = this
      this.num = selectedFile.length
      selectedFile.forEach(item => {
        this.getPrintPrice(item.id)
      })
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    this.price = ''
    this.load()
  }
}
</script>

this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    async getPrintPrice(id) {
      let _this = this
      let { parameter, facility } = _this
      let data = {
        deviceId: facility.id,
        printType: 'DocumentPrinting',
        copies: parameter.copies,
        printDirection: 'VERTICAL',
        printingColor: parameter.printingColor,
        printingFaces: parameter.printingFaces,
        fileId: id
      }
      let res = await getPrintPrice(data)
      if (_this.price == '') {
        _this.price = 0
      }
      _this.price = (parseFloat(res * 1000) + _this.price * 1000) / 1000
      _this.num = _this.num - 1
    },
    load() {
      let { selectedFile } = this
      this.num = selectedFile.length
      selectedFile.forEach(item => {
        this.getPrintPrice(item.id)
      })
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    this.price = ''
    this.load()
  }
}
</script>

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

      <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: '',

canvasData: '',
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  methods: {
    getPdf(title,id){
      let _this = this
      html2Canvas(document.querySelector(`#${id}`), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        // 删除本地存储的base64字段
        let pdfData = PDF.output('datauristring')//获取base64Pdf
        // console.log('pdfData', pdfData)
        let file = _this.dataURLtoFile(pdfData,'zjz.pdf')
        // console.log('222',file)
        _this.uploadImg([file],false)
        // return pdfData

// 导出PDF文件
        // PDF.save(title + '.pdf')
      })
    },
    // 导出pdf
    async exportPDF() {
      let _this = this
      _this.getPdf('证件照', 'captureArea');
    },
    async uploadImg(data, sta) {
      let _this = this
      _this.cite.loadingSta = {
        sta: true,
        name: '正在转码，请稍后'
      }
      const addr = require('../assets/audio/FileformatTransforming.mp3')
      this.play(addr)
      let forData = new FormData()
      let j = data.length
      _this.usbNum = j
      for (let i = 0; i < data.length; i++) {
        let formData = new FormData()
        let file = data[i]
        if (sta) {
          // let dataURL = file.toDataURL('image/png')
          let name = i + '.png'
          file = _this.dataURLtoFile(file, name)
        }
        formData.append('file', file) // 使用数组语法添加多个文件
        if (this.cite.modeName == '身份证打印') {
          // let res = await image2Pdf(formData)
          let res = await upload2Pdf(formData).catch(error => {alert(error,this)})
          // console.log(res)
          _this.cite.selectedFile.push(res)
          // console.log('打印文件', this.cite.selectedFile, res)
          if (_this.usbNum == i + 1) {
            // 转码结束
            _this.cite.loadingSta = {
              sta: false
            }
            _this.$router.push({
              name: 'argument'
            })
          }
        } else {
          forData.append('images', file)
          // let res = await upload2Pdf(formData)
          // _this.cite.selectedFile.push(res)
          // if(_this.usbNum == i+1) {
          //   // 转码结束
          //   _this.cite.loadingSta = {
          //     sta: false,
          //   }
          //   _this.$router.push({
          //     name: 'argument',
          //   })
          // }
          // console.log('打印文件', this.cite.selectedFile, res)
        }
      }

if (this.name == '扫描打印') {
        let res = await images2Pdf(forData).catch(error => {alert(error,this)})
        _this.cite.selectedFile.push(res)
        // 转码结束
        _this.cite.loadingSta = {
          sta: false
        }
        _this.$router.push({
          name: 'argument'
        })
      }
    },
    async readPDF(url) {
      // 请求接口
      //将文件转为pdf
      const res = await readFile({ filePath: url }).catch(error => {alert(error,this)})
      if (res.data.previewPath) {
        this.pdfUrl = res.data.previewPath + '#scrollbars=0&toolbar=0&statusbar=0'
        this.dialogVisible = true
      }
      // this.pdfUrl = 'https://mps.xlmalls.com/files/5447462093341142.pdf'
    },
    // 预览图片
    previewImg(url) {
      this.previewImgs = url
      this.IsPreviewImg = true
    },
    async skip(href, name) {
      if (this.usbList.length > 0) {
        // 保存选中的U盘文件
        // await this.uploadImg(this.UpFile, false)
        console.log('u盘')
        await this.dealFile()
      } else if (this.imgList.length > 0) {
        // 保存高拍仪图片
        await this.uploadImg(this.imgList, true)
      } else if (this.cardInfo) {
        // 保存身份证图片
        await this.exportPDF()
        // await this.captureAndDownload()
      } else {
        this.cite.state = {
          name: '请选择文件打印！',
          sta: true
        }
        return
      }
      console.log(href, name)
      // this.$router.push({
      //   name: href,
      //   params: {
      //     name: name
      //   }
      // })
    },
    async captureAndDownload() {
      // const captureArea = this.$refs.sfzCanvas
      const captureArea = this.$refs.captureArea

// 使用 html2canvas 将区域内容生成为图片
      console.log('html2canvas', window.devicePixelRatio)
      let sca = 1
      // if (window.devicePixelRatio >= 1) {
      //   sca = 0.7
      // }
      const canvas = await html2canvas(captureArea, { scale: sca })
      console.log(canvas)
      // 将 canvas 转为图片 URL
      canvas.toBlob((blob) => {
        // blob将base64编码的src 以二进制的形式存进了 Blob对象
        const a = document.createElement("a");
        a.download = "证书.png";
        a.href = window.URL.createObjectURL(blob);
        a.click();
        console.log(blob);
      }, "image/png");
      const dataURL = canvas.toDataURL('image/png')
      const name = 'sfz.png'
      const file = this.dataURLtoFile(dataURL, name)
      console.log(file)
      this.uploadImg([file], false)
    },
    dataURLtoFile(dataURL, filename) {
      const arr = dataURL.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    onChange(index, name, sta) {
      if (name == 'usbList') {
        this[name][index].sta = sta
      } else {
        this[name] = index
      }
    },
    onCancel(index, name) {
      if (name == 'imgList') {
        this.smfyIndex = -1
      }
      this[name].splice(index, 1)
    },
    paiz() {
      this.socket.send('Capture@2')
    },
    init: function () {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听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)
      }
    },
    dwhs(n) {
      return n
    },
    canvasSfz() {
      let _this = this
      let {cardInfo} = _this
      const canvas = document.getElementById('sfzCanvas')
      // const canvas = this.$refs.sfzCanvas;
      const ctx = canvas.getContext('2d');
      // 在 Canvas 上进行绘图操作
      ctx.fillStyle = 'transparent';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

// 在Canvas画布 添加图片
      let img = new Image()
      img.src = require('@/assets/card2.png')
      img.onload = () => {
        ctx.drawImage(img, 0, 0, _this.dwhs(640), _this.dwhs(405))

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

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

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

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

let img2 = new Image()
        // img2.src = _this.photo
        img2.src = require('@/assets/card1.png')
        img2.onload = () => {
          ctx.drawImage(img2, _this.dwhs(410), _this.dwhs(60), _this.dwhs(192), _this.dwhs(238))

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

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

canvas.style.letterSpacing = "2px";
            ctx.font = _this.dwhs(32)+"px STHeiti"
            ctx.fillText(cardInfo.idNum, _this.dwhs(210), _this.dwhs(345))

// canvas.toBlob(function (blob) {
            //   // 图片ajax上传
            //   _this.uploadImg([blob], false)
            // },'image/png');

}
        }
      }
    },
    sfzCard2() {
      let _this = this
      let res = {
        errorMsg: 'OK',
        resultContent: {
          address: '江西省赣州市寻乌县长宁镇镇山路14号402室',
          birthday: '19960515',
          effectDate: '20231010',
          expireDate: '20431010',
          gender: '1',
          idNum: '360734199605150074',
          issueOrg: '寻乌县公安局',
          name: '韩菲',
          nation: '01',
          photo:
            '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'
        }
      }
      if (res.errorMsg == 'OK') {
        // console.log(res.resultContent)
        _this.imgDeals(res.resultContent.photo)
        _this.cardInfo = parseCardWzxx(res.resultContent)
      }
    },
    // 获取身份证信息
    async sfzCard() {
      let _this = this
      let res = await readCard().catch(error => {alert(error,this)})
      if (res.errorMsg == 'OK') {
        // console.log(res.resultContent)
        _this.imgDeals(res.resultContent.photo)
        _this.cardInfo = parseCardWzxx(res.resultContent)
      } else {
        if (this.$route.name == 'selectFile') {
          setTimeout(() => {
            this.sfzCard()
          }, 1000)
        }
      }
    },
    // 图片处理
    imgDeals(re) {
      let _this = this
      let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png')
      let formData = new FormData()
      formData.append('file', file)
      formData.append('colorEnum', 'CLEAR')
      changeIdPhotoBgc(formData).then(res => {
        console.log(res)
        _this.photo = res.previewPath
        // this.canvasSfz()
      }).catch(error => {alert(error,this)})
    },
    // 读取U盘
    readUsb() {
      let data = {
        extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png'
      }
      readUsb(data).then(res => {
        // console.log(res)
        if (res) {
          if (this.UpFile.length != res.length) {
            // console.log(this.UpFile , res)
            this.UpFile = res
            this.usbList = []
            res.forEach(re => {
              this.usbList.push({
                name: re.name || re,
                size: re.size,
                sta: false
              })
            })
          }
        } else {
          this.UpFile = []
          this.usbList = []
          this.cite.state = {
            name: '请插入U盘',
            sta: true
          }
        }
        if (this.$route.name == 'selectFile') {
          setTimeout(() => {
            this.readUsb()
          }, 1000)
        }
      }).catch(error => {alert(error,this)})
    },
    // 处理选中文件
    async dealFile() {
      let { usbList } = this
      // 判断有没有选中u盘文件
      let selectUsb = usbList.some(item => {
        return item.sta === true
      })
      // 没有选中 中断后续操作 并提示
      if (!selectUsb) {
        this.cite.state = {
          name: '请选中文件再点击确认资料',
          sta: true
        }
        return
      }
      this.cite.loadingSta = {
        sta: true,
        name: '正在转码，请稍后'
      }
      const addr = require('../assets/audio/FileformatTransforming.mp3')
      this.play(addr)
      await usbList.forEach((re, i) => {
        if (re.sta) {
          this.usbNum = i
          this.readFile(re.name, i, re.size)
        }
      })
    },
    async readFile(url, i, num) {
      if(parseFloat(num)>5000000) {
        let res = await readFile2({ filePath: url }).catch(error => {alert(error,this)})
        this.cite.selectedFile.push(res.data)
      }else{
        let res = await readFile({ filePath: url }).catch(error => {alert(error,this)})
        this.cite.selectedFile.push(res.data)
      }
      if (this.usbNum == i) {
        // 转码结束
        this.cite.loadingSta = {
          sta: false
        }
        this.$router.push({
          name: 'argument'
        })
      }
    },
    play(addr) {
      let music = new Audio()
      music = addr
      this.$refs.audio.src = music
      this.$refs.audio.play()
    }
  },
  destroyed() {
    // 销毁监听
    if (this.socket) {
      this.close()
    }
  },
  mounted() {
    this.cite.selectedFile = []
    if (this.cite.modeName == '扫描打印') {
      this.init()
    } else if (this.cite.modeName == '身份证打印') {
      const addr = require('../assets/audio/IdCardReaderGuide.mp3')
      this.play(addr)
      this.sfzCard()
    } else if (this.cite.modeName == 'U盘打印') {
      this.readUsb()
      const addr = require('../assets/audio/Remind4PluginUSB.mp3')
      this.play(addr)
    }
  }
}
</script>

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

UpFile: [],

cardInfo: '',

usbList: [],
      usbTime: '',
      usbNum: 0,
      isVertical: false,
      dialogVisible: false,
      pdfUrl: '',
      IsPreviewImg: false,
      previewImgs: '',

// 导出PDF文件
        // PDF.save(title + '.pdf')
      })
    },
    // 导出pdf
    async exportPDF() {
      let _this = this
      _this.getPdf('证件照', 'captureArea');
    },
    async uploadImg(data, sta) {
      let _this = this
      _this.cite.loadingSta = {
        sta: true,
        name: '正在转码，请稍后'
      }
      const addr = require('../assets/audio/FileformatTransforming.mp3')
      this.play(addr)
      let forData = new FormData()
      let j = data.length
      _this.usbNum = j
      for (let i = 0; i < data.length; i++) {
        let formData = new FormData()
        let file = data[i]
        if (sta) {
          // let dataURL = file.toDataURL('image/png')
          let name = i + '.png'
          file = _this.dataURLtoFile(file, name)
        }
        formData.append('file', file) // 使用数组语法添加多个文件
        if (this.cite.modeName == '身份证打印') {
          // let res = await image2Pdf(formData)
          let res = await upload2Pdf(formData)
          // 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.exportPDF()
        // await this.captureAndDownload()
      } else {
        this.cite.state = {
          name: '请选择文件打印！',
          sta: true
        }
        return
      }
      console.log(href, name)
      // this.$router.push({
      //   name: href,
      //   params: {
      //     name: name
      //   }
      // })
    },
    async captureAndDownload() {
      // const captureArea = this.$refs.sfzCanvas
      const captureArea = this.$refs.captureArea