GitBucket
4.23.0
Toggle navigation
Sign in
Files
Branches
1
Releases
Issues
Pull requests
Labels
Priorities
Milestones
Wiki
Forks
hanfei
/
VueSharedPrinting
Browse code
han
master
1 parent
31d60c8
commit
d19ced16827e7eb6c748f5ceb9ef4857688a90c6
hanfei
authored
on 25 Jun
Patch
Showing
5 changed files
src/api/resultApi.js
src/components/global.vue
src/views/codeExtract.vue
src/views/device.vue
src/views/selectFile.vue
Ignore Space
Show notes
View
src/api/resultApi.js
import request from '../utils/request' import cite from '../utils/cite' // 打印价格 export const getPrintPriceList = params => { return request({ url: '/device/getPrintPriceList', params }) } // 获取设备ID export const getDeviceByCode = params => { return request({ url: '/device/getDeviceByCode', params }) } // 文件上传 export const upload2Pdf = data => { return request({ method: 'POST', url: '/file/upload2Pdf', data }) } // 高拍仪图片上传 export const images2Pdf = data => { return request({ method: 'POST', url: '/file/images2Pdf', data }) } // 文件上传-身份证 export const image2Pdf = data => { return request({ method: 'POST', url: '/file/image2Pdf', data }) } // 设备-获取打印价格 export const getPrintPrice = data => { return request({ url: '/device/getPrintPrice', params: data }) } // 设备-提交打印任务 export const submitPrintingTask = data => { return request({ headers: { "Member-Token": cite.memberLoginVo.token, }, method: 'POST', url: '/device/auth/submitPrintingTask', data }) } // 订单-获取支付二维码 export const getPayQrCode = data => { return request({ url: '/order/getPayQrCode', params: data }) } export const downloadPDF = data => { return request({ url: '/file/download', timeout: 2 * 60 * 1000, responseType: 'blob', params: data }) } // 订单-获取打印任务进度 export const getPrintTask = data => { return request({ url: '/device/getPrintTask', params: data }) } // 获取广告链接 export const getAdvertisement = data => { return request({ url: '/placement/getAdvertisement', params: data }) } // 文件-证件照切换底色 export const changeIdPhotoBgc = data => { return request({ method: 'POST', url: '/file/changeIdPhotoBgc', data }) } // -获取订单状态 export const getTransactionStatus = params => { return request({ url: '/order/getTransactionStatus', params }) } // 订单-确认取件码打印任务 export const orderSubmitPrintingTask = data => { return request({ url: '/order/submitPickupCodePrintingTask', method: 'POST', data }) }
import request from '../utils/request' import cite from '../utils/cite' // 打印价格 export const getPrintPriceList = params => { return request({ url: '/device/getPrintPriceList', params }) } // 获取设备ID export const getDeviceByCode = params => { return request({ url: '/device/getDeviceByCode', params }) } // 文件上传 export const upload2Pdf = data => { return request({ method: 'POST', url: '/file/upload2Pdf', data }) } // 高拍仪图片上传 export const images2Pdf = data => { return request({ method: 'POST', url: '/file/images2Pdf', data }) } // 文件上传-身份证 export const image2Pdf = data => { return request({ method: 'POST', url: '/file/image2Pdf', data }) } // 设备-获取打印价格 export const getPrintPrice = data => { return request({ url: '/device/getPrintPrice', params: data }) } // 设备-提交打印任务 export const submitPrintingTask = data => { return request({ headers: { "Member-Token": cite.memberLoginVo.token, }, method: 'POST', url: '/device/auth/submitPrintingTask', data }) } // 订单-获取支付二维码 export const getPayQrCode = data => { return request({ url: '/order/getPayQrCode', params: data }) } export const downloadPDF = data => { return request({ url: '/file/download', timeout: 2 * 60 * 1000, responseType: 'blob', params: data }) } // 订单-获取打印任务进度 export const getPrintTask = data => { return request({ url: '/device/getPrintTask', params: data }) } // 获取广告链接 export const getAdvertisement = data => { return request({ url: '/placement/getAdvertisement', params: data }) } // 文件-证件照切换底色 export const changeIdPhotoBgc = data => { return request({ method: 'POST', url: '/file/changeIdPhotoBgc', data }) } // -获取订单状态 export const getTransactionStatus = params => { return request({ url: '/order/getTransactionStatus', params }) } // 订单-确认取件码打印任务 export const orderSubmitPrintingTask = params => { return request({ url: '/order/submitPickupCodePrintingTask', params }) }
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 flex-center" v-if="mgcData.show"> <div class="curtain"></div> <div class="content" style="margin-top: 0;top: 20%;height: auto;"> <div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem;">{{mgcData.re}}</div> <div class="btn flex-center" style="margin: 2rem auto;" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </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, getTransactionStatus} from '@/api/resultApi' import VueQr from 'vue-qr' import {bdGetTransactionStatus, 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' } }, mgcData: { show: false, re: '尊敬的用户您好,打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容,打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情,系统审核通过即分配取件码。凭借取件码,可以稍后在任意一台打印服务终端上通过' } } }, 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 = [] this.mgcData = { show: false, re: '' } } else { this.numZt = this.numZt - 1 setTimeout(() => { this.onNum() }, 1000) } this.ztyc = this.cite.ztyc }, onChange(name, val) { this[name] = val }, ddycztcx(code) { // 订单状态,进度查询 if (this.DYZshow) { setTimeout(() => { bdGetTransactionStatus({ code: code }).then(res => { console.log('bdGetTransactionStatus',res) if(res.status=='COMPLETE'||res.status=='CANCELED') { // 已完成,已取消 this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else{ if(res.status=='IN_PROGRESS') { // 进行中 if(!this.Progress.rate&&res.rate&&res.rate!=0) { this.Progress.rate = res.rate // if (res.rate == '99%') { // setTimeout(() => { // if (this.Progress.rate == '99%') { // this.Progress.rate = '100%' // } // }, 500) // } } }else if(res.status=='ABNORMAL'){ // 订单异常 if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } this.ddycztcx(code) } }) },1000) } }, toLoad() { // this.cite.code = '20240326-066184' // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } // this.DYZshow = true // this.ddcx('20240110114509927498') // if(this.code) {return} 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) } }, // 3秒查询订单状态 ddcx(code) { if(this.DYZshow) { setTimeout(()=>{ getTransactionStatus({ code: code }).then(res => { // 已完成,已取消,订单异常 // console.log('3秒查询订单状态',res) if(res=='COMPLETE'||res=='CANCELED') { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else if(res=='ABNORMAL') { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true }else{ this.ddcx(code) } }).catch(error => { alert(error,this) if(error.response.status==500) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 } }) },3000) } }, 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 => { this.subscribes() if (e.cmd !== 'connack') { console.log('连接成功', e) } }) //重连提醒 this.client.on('reconnect', error => { if (error) { console.log('正在重连', error) } }) //连接失败提醒 this.client.on('error', error => { if (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 // } // 3秒查询订单状态 this.ddcx(data.code) // 订单状态,进度查询 this.ddycztcx(data.code) } else if (data.cmd == 'LOGIN') { //登录 } else if (data.cmd == 'LOGOUT') { //登出 } else if (data.cmd == 'RECOGNITION') { //敏感词,内容 需审核 // console.log('触发提示mgc') this.mgcData = { show: true, re: data.audit } this.numZt = 30 this.onNum() } 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: 2 }, 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 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 flex-center" v-if="mgcData.show"> <div class="curtain"></div> <div class="content" style="margin-top: 0;top: 20%;height: auto;"> <div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem;">{{mgcData.re}}</div> <div class="btn flex-center" style="margin: 2rem auto;" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </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, getTransactionStatus} from '@/api/resultApi' import VueQr from 'vue-qr' import {bdGetTransactionStatus, 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' } }, mgcData: { show: false, re: '尊敬的用户您好,打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容,打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情,系统审核通过即分配取件码。凭借取件码,可以稍后在任意一台打印服务终端上通过' } } }, 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 = [] this.mgcData = { show: false, re: '' } } else { this.numZt = this.numZt - 1 setTimeout(() => { this.onNum() }, 1000) } this.ztyc = this.cite.ztyc }, onChange(name, val) { this[name] = val }, ddycztcx(code) { // 订单状态,进度查询 if (this.DYZshow) { setTimeout(() => { bdGetTransactionStatus({ code: code }).then(res => { console.log('bdGetTransactionStatus',res) if(res.status=='COMPLETE'||res.status=='CANCELED') { // 已完成,已取消 this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else{ if(res.status=='IN_PROGRESS') { // 进行中 if(!this.Progress.rate&&res.rate&&res.rate!=0) { this.Progress.rate = res.rate // if (res.rate == '99%') { // setTimeout(() => { // if (this.Progress.rate == '99%') { // this.Progress.rate = '100%' // } // }, 500) // } } }else if(res.status=='ABNORMAL'){ // 订单异常 if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } this.ddycztcx(code) } }) },1000) } }, toLoad() { // this.cite.code = '20240326-066184' // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } // this.DYZshow = true // this.ddcx('20240110114509927498') // if(this.code) {return} 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) } }, // 3秒查询订单状态 ddcx(code) { if(this.DYZshow) { setTimeout(()=>{ getTransactionStatus({ code: code }).then(res => { // 已完成,已取消,订单异常 // console.log('3秒查询订单状态',res) if(res=='COMPLETE'||res=='CANCELED') { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else if(res=='ABNORMAL') { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true }else{ this.ddcx(code) } }).catch(error => { alert(error,this) if(error.response.status==500) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 } }) },3000) } }, 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 // } // 3秒查询订单状态 this.ddcx(data.code) // 订单状态,进度查询 this.ddycztcx(data.code) } else if (data.cmd == 'LOGIN') { //登录 } else if (data.cmd == 'LOGOUT') { //登出 } else if (data.cmd == 'RECOGNITION') { //敏感词,内容 需审核 console.log('触发提示mgc') // this.mgcData = { // show: true, // re: data.audit // } // this.numZt = 30 // this.onNum() } 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: 2 }, 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>
Ignore Space
Show notes
View
src/views/codeExtract.vue
<template> <div class="codeExtract"> <navbar :name="name"/> <!-- 提取码打印--> <div class="box flex-center"> <div class="main"> <!-- <div class="tit">取件码提取打印</div>--> <div class="flex-center"> <input v-model="qjmData" class="myInput" disabled maxlength="6" placeholder="请输入6位取件码" type="text"> </div> <div class="numjp flex-between"> <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div> </div> <div class="btn flex-center" @click="open()">提取打印</div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在左边的取件码输入框中输入需要打印订单的取件码,然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效,如无法提取打印时,请核对改取件码是否已经使用过并已失效。 </div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {orderSubmitPrintingTask} from "@/api/resultApi"; import alert from "@/utils/alert"; export default { name: 'codeExtract', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: '取件码打印', name: '取件码打印', qjmData: '', numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'] } }, methods: { onImport(num) { let _this = this if (num === '清除') { _this.qjmData = '' return } else if (num === '删除') { _this.qjmData = _this.qjmData.slice(0, _this.qjmData.length - 1) return } else if (_this.qjmData.length > 5) { return } _this.qjmData = _this.qjmData + num }, open() { let _this = this let data = { deviceCode: _this.cite.code, pickupCode: _this.qjmData } if (_this.qjmData.length !== 6) { this.cite.state = { name: '请输入6位取件码!', sta: true } return } orderSubmitPrintingTask(data).then(res => { if(res.code) { this.cite.state = { name: res.msg, sta: true } }else if (res === true) { // _this.$router.push({ // name: 'complete', // params: { // name: _this.name // } // }) } }).catch(error => { alert(error, this) }) } } } </script> <style lang="less" scoped> @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'); //定义好文件的相对地址 } .codeExtract { .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; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .main { width: 32.6875rem; margin-right: 18.75rem; .myInput { width: 100%; padding: 0 1.5rem; height: 5.625rem; font-size: 1.875rem; margin: 1.25rem 0 0; border-radius: 1.25rem; border: 0.0625rem solid #C9C7C0; } } .tip { width: 40rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto; text-align: center; } } .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; } .numjp { flex-wrap: wrap; width: 25rem; font-size: 1.75rem; margin: 1.25rem auto 0.625rem; .li { width: 6.875rem; height: 3.125rem; margin-bottom: 1.25rem; border: 0.0625rem solid #ccc; border-radius: 0.625rem; cursor: pointer; } } } } </style>
<template> <div class="codeExtract"> <navbar :name="name"/> <!-- 提取码打印--> <div class="box flex-center"> <div class="main"> <div class="tit">取件码提取打印</div> <div class="flex-center"> <input v-model="qjmData" class="myInput" maxlength="6" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入取件码" type="number"> </div> <div class="btn flex-center" @click="open()">提取打印</div> </div> <div class="tip"> <div class="title">温馨提示</div> <div class="content"> 请在左边的取件码输入框中输入需要打印订单的取件码,然后点按下面的“提取打印”按钮开始打印。取件码可从小程序的个人中心-打印记录中对应的打印订单信息中获取。取件码作为取件一次性使用有效,如无法提取打印时,请核对改取件码是否已经使用过并已失效。 </div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {orderSubmitPrintingTask} from "@/api/resultApi"; import alert from "@/utils/alert"; export default { name: 'codeExtract', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, data() { return { tit: '取件码打印', name: '取件码打印', qjmData: '', } }, methods: { open() { let _this = this let data = { deviceCode: _this.cite.code, pickupCode: _this.qjmData } orderSubmitPrintingTask(data).then(res => { if (res===true) { // _this.$router.push({ // name: 'complete', // params: { // name: _this.name // } // }) } }).catch(error => { alert(error, this) }) } } } </script> <style lang="less" scoped> @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'); //定义好文件的相对地址 } .codeExtract { .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; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .main { width: 32.6875rem; margin-right: 18.75rem; .myInput { width: 100%; padding: 0 1.5rem; height: 5.625rem; font-size: 1.875rem; margin: 3.75rem 0; border-radius: 1.25rem; border: 0.0625rem solid #C9C7C0; } /* 仅隐藏特定输入框旁的上下箭头 */ .myInput::-webkit-inner-spin-button, .myInput::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .myInput { -moz-appearance: textfield; } } .tip { width: 40rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto; text-align: center; } } .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; } } } </style>
Ignore Space
Show notes
View
src/views/device.vue
<template> <div class="device"> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div v-if="false" class="left"> <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill" /> </div> </div> <div :class="['left', { 'vertical-width': isVertical }]"> <!-- <div class="zzc"></div> --> <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType == 'image/jpeg'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <div v-else-if="item.fileType == 'image/png'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <video v-if="index == swIndex" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata" :src="item.previewPath" autoplay muted style="width: 100%; height: 100%" ></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png" /> 联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png" /> 价格查询 </div> </div> </div> <div class="right" v-if="!isVertical"> <div class="main4 flex-center"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm" @click="play"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" :style="smdysta?'background: #ccc;':''" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> <div class="main icon5 flex-start" @click="skip('codeExtract', '取件码打印')"> <img class="qjmIcon" src="../assets/demo17.png" /> <div>取件码打印</div> </div> </div> </div> <!-- 竖版 --> <div class="right vertical-bottom vertical-width" v-if="isVertical"> <div class="main4 flex-center vertical-width50"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="vertical-bottom-right"> <div class="main icon2 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <!-- <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> --> <div class="main icon4 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <div class="dbTip flex-between"> <div>机器编号:{{ cite.code }}</div> <div>客服电话:{{ facility.servicePhone }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/ConnectingRemind.mp3" /> </audio> </div> </template> <script> import VueQr from 'vue-qr' import {gpyError} from "@/api/bdResultApi"; export default { name: 'device', components: { VueQr }, data() { return { swIndex: 0, mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '', isVertical: false, playTimer: '', //播放的定时任务 errTimer: null, //异常的定时器 smdysta: false, } }, methods: { skip(href, name) { let { facility } = this let { sta, name2 } = '' facility.paperNumber.forEach(item => { if (item.name.indexOf('A4') != -1) { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } // if (this.cite.memberLoginVo == '') { // this.cite.state = { // name: '请扫码登录设备再操作!', // sta: true // } // return // } if (href == 'operationGuide') { if(this.smdysta) { this.cite.state = { name: '高拍仪异常暂停使用,请联系客服维修!', sta: true } return; } this.cite.modeName = name } this.$router.push({ name: href, params: { name: name } }) }, gpyError() { let _this = this gpyError().then(res => { _this.smdysta = res }) }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT(T) { let _this = this this.mySwiper = new this.Swiper('.swiper-container', { // allowSlidePrev: false, // allowSlideNext: false, // 改变swiper样式时,自动初始化swiper observer: true, // 监测swiper父元素,如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: T, disableOnInteraction: false }, pagination: { el: '.swiper-pagination' }, on: { slideChangeTransitionEnd: function () { // console.log(this.realIndex); _this.swIndex = this.realIndex if (_this.advertisement[this.realIndex].fileType == 'video/mp4') { _this.bannerLoop(false) } } } }) }, bannerLoop(sta, n) { let _this = this if (sta) { _this.mySwiper.slideTo(n) _this.mySwiper.autoplay.start() } else { _this.mySwiper.autoplay.stop() } }, onPause() { let n = this.swIndex + 1 if (n == this.advertisement.length) { n = 1 } this.bannerLoop(true, n) }, onTimeupdate() { // console.log(123,e) }, // 正在加载中 loadEdmetadata() { // console.log(456,e) }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, created() {}, mounted() { this.gpyError() this.load() if (window.outerWidth === 1080 || window.outerWidth === 1064) { this.cite.isVertical = true this.isVertical = true } else { this.cite.isVertical = false this.isVertical = false } // 判断是不是设备是不是异常 this.playTimer = setInterval(() => { console.log(this.cite.serveError) if (this.cite.serveError) { const addr = require('../assets/audio/ExceptionNotice.mp3') this.play(addr) } }, 60000) setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT(this.advertisement[0].intervalTime * 1000) }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code // console.log(this.appSrc) } }, 300) }, destroyed() { clearInterval(this.playTimer) } } </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; position: relative; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } .zzc { position: absolute; width: 100%; height: 100%; z-index: 99; left: 0; right: 0; } } .right { width: 22rem; } } .main { width: 100%; //height: 8rem; height: 6rem; border-radius: 1.63rem; //font-size: 1.8rem; font-size: 1.6rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .icon5 { background: linear-gradient(0deg, #F95555 0%, #DE2F2F 100%); box-shadow: 0 0 0.75rem 0 rgba(233, 63, 63, 0.53); } .feature { padding: 0 1.25rem; } .qjmIcon { width: 2.875rem!important; height: 4.5rem; margin: 0 41px!important; } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } // 广告高度 .vertical-height { height: 72rem !important; } .vertical-width-direction { width: 100%; flex-direction: column; } .vertical-width { width: 100% !important; } .vertical-width50 { width: 48% !important; } .vertical-bottom { display: flex; // align-items: center; justify-content: space-between; flex-direction: row-reverse; margin-top: 2rem; } .vertical-bottom-right { width: 60%; margin-right: 2rem; display: flex; flex-direction: column; justify-content: space-around; } </style>
<template> <div class="device"> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div v-if="false" class="left"> <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill" /> </div> </div> <div :class="['left', { 'vertical-width': isVertical }]"> <!-- <div class="zzc"></div> --> <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType == 'image/jpeg'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <div v-else-if="item.fileType == 'image/png'" :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <img :src="item.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else :class="['advertising', 'flex-center', { 'vertical-height': isVertical }]"> <video v-if="index == swIndex" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata" :src="item.previewPath" autoplay muted style="width: 100%; height: 100%" ></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png" /> 联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png" /> 价格查询 </div> </div> </div> <div class="right" v-if="!isVertical"> <div class="main4 flex-center"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm" @click="play"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" :style="smdysta?'background: #ccc;':''" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> <div style="display: none;" class="main icon5 flex-start" @click="skip('codeExtract', '取件码打印')"> <img class="qjmIcon" src="../assets/demo17.png" /> <div>取件码打印</div> </div> </div> </div> <!-- 竖版 --> <div class="right vertical-bottom vertical-width" v-if="isVertical"> <div class="main4 flex-center vertical-width50"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="vertical-bottom-right"> <div class="main icon2 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <!-- <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> --> <div class="main icon4 flex-start vertical-width" style="height: 10rem !important" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <div class="dbTip flex-between"> <div>机器编号:{{ cite.code }}</div> <div>客服电话:{{ facility.servicePhone }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/ConnectingRemind.mp3" /> </audio> </div> </template> <script> import VueQr from 'vue-qr' import {gpyError} from "@/api/bdResultApi"; export default { name: 'device', components: { VueQr }, data() { return { swIndex: 0, mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '', isVertical: false, playTimer: '', //播放的定时任务 errTimer: null, //异常的定时器 smdysta: false, } }, methods: { skip(href, name) { let { facility } = this let { sta, name2 } = '' facility.paperNumber.forEach(item => { if (item.name.indexOf('A4') != -1) { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } // if (this.cite.memberLoginVo == '') { // this.cite.state = { // name: '请扫码登录设备再操作!', // sta: true // } // return // } if (href == 'operationGuide') { if(this.smdysta) { this.cite.state = { name: '高拍仪异常暂停使用,请联系客服维修!', sta: true } return; } this.cite.modeName = name } this.$router.push({ name: href, params: { name: name } }) }, gpyError() { let _this = this gpyError().then(res => { _this.smdysta = res }) }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT(T) { let _this = this this.mySwiper = new this.Swiper('.swiper-container', { // allowSlidePrev: false, // allowSlideNext: false, // 改变swiper样式时,自动初始化swiper observer: true, // 监测swiper父元素,如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: T, disableOnInteraction: false }, pagination: { el: '.swiper-pagination' }, on: { slideChangeTransitionEnd: function () { // console.log(this.realIndex); _this.swIndex = this.realIndex if (_this.advertisement[this.realIndex].fileType == 'video/mp4') { _this.bannerLoop(false) } } } }) }, bannerLoop(sta, n) { let _this = this if (sta) { _this.mySwiper.slideTo(n) _this.mySwiper.autoplay.start() } else { _this.mySwiper.autoplay.stop() } }, onPause() { let n = this.swIndex + 1 if (n == this.advertisement.length) { n = 1 } this.bannerLoop(true, n) }, onTimeupdate() { // console.log(123,e) }, // 正在加载中 loadEdmetadata() { // console.log(456,e) }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, created() {}, mounted() { this.gpyError() this.load() if (window.outerWidth === 1080 || window.outerWidth === 1064) { this.cite.isVertical = true this.isVertical = true } else { this.cite.isVertical = false this.isVertical = false } // 判断是不是设备是不是异常 this.playTimer = setInterval(() => { console.log(this.cite.serveError) if (this.cite.serveError) { const addr = require('../assets/audio/ExceptionNotice.mp3') this.play(addr) } }, 60000) setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT(this.advertisement[0].intervalTime * 1000) }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code // console.log(this.appSrc) } }, 300) }, destroyed() { clearInterval(this.playTimer) } } </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; position: relative; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } .zzc { position: absolute; width: 100%; height: 100%; z-index: 99; left: 0; right: 0; } } .right { width: 22rem; } } .main { width: 100%; height: 8rem; //height: 6rem; border-radius: 1.63rem; //font-size: 1.8rem; font-size: 1.6rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .icon5 { background: linear-gradient(0deg, #F95555 0%, #DE2F2F 100%); box-shadow: 0 0 0.75rem 0 rgba(233, 63, 63, 0.53); } .feature { padding: 0 1.25rem; } .qjmIcon { width: 2.875rem!important; height: 4.5rem; margin: 0 41px!important; } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } // 广告高度 .vertical-height { height: 72rem !important; } .vertical-width-direction { width: 100%; flex-direction: column; } .vertical-width { width: 100% !important; } .vertical-width50 { width: 48% !important; } .vertical-bottom { display: flex; // align-items: center; justify-content: space-between; flex-direction: row-reverse; margin-top: 2rem; } .vertical-bottom-right { width: 60%; margin-right: 2rem; display: flex; flex-direction: column; justify-content: space-around; } </style>
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%;resize: none;"></iframe> </div> </div> </div> <div v-if="IsPreviewImg && name === '扫描打印'"> <div class="previewImg" style="width: 100%; height: 100%; background-color: black" @click="IsPreviewImg = false"> <img :src="previewImgs" alt="" style="width: 39rem; height: 53.9rem" /> </div> </div> <div class="dyzTip" v-if="dyzTip"> <div class="curtain"></div> <div class="content"> <div class="flex-center">高拍仪检测异常信息提示</div> <div class="flex-center" style="padding: .8rem 1rem;font-weight: 500;"> 尊敬的用户您好,抱歉地通知您,系统检测到高拍仪提供的扫描打印服务状态异常,我们准备随机重启计算机来恢复扫描打印功能,请您稍后等计算机重启后重新尝试扫描打印功能,谢谢! </div> <div class="flex-between" style="margin: 4rem 2rem 0;"> <div class="btn flex-center" @click="tikChange(0)">返回首页</div> <div class="btn flex-center" @click="tikChange(1)">立即重启</div> </div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import html2canvas from 'html2canvas' import JsPDF from 'jspdf' import {changeIdPhotoBgc, images2Pdf, upload2Pdf} from '@/api/resultApi' import {readUsb, readFile, readCard, readFile2, shutdown} from '@/api/bdResultApi' import parseCardWzxx from '../utils/mz' import html2Canvas from "html2canvas"; import alert from "@/utils/alert"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if (val.substring(4, 5) == 0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if (val.substring(6, 7) == 0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4) + '.' + val.substring(4, 6) + '.' + val.substring(6, 8) } }, data() { return { isChecked: true, tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', usbList: [], usbTime: '', usbNum: 0, isVertical: false, dialogVisible: false, pdfUrl: '', IsPreviewImg: false, previewImgs: '', canvasData: '', dyzTip: false, cftjSta: false, //重复提交状态 } }, created() { this.isVertical = this.cite.isVertical }, methods: { getPdf(title,id){ let _this = this html2Canvas(document.querySelector(`#${id}`), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } // 删除本地存储的base64字段 let pdfData = PDF.output('datauristring')//获取base64Pdf // console.log('pdfData', pdfData) let file = _this.dataURLtoFile(pdfData,'zjz.pdf') // console.log('222',file) _this.uploadImg([file],false) // return pdfData // 导出PDF文件 // PDF.save(title + '.pdf') }) }, // 导出pdf async exportPDF() { let _this = this _this.getPdf('证件照', 'captureArea'); }, async uploadImg(data, sta) { let _this = this _this.cite.loadingSta = { sta: true, name: '正在转码,请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) let forData = new FormData() let j = data.length _this.usbNum = j for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if (sta) { // let dataURL = file.toDataURL('image/png') let name = i + '.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 if (this.cite.modeName == '身份证打印') { // let res = await image2Pdf(formData) let res = await upload2Pdf(formData).catch(error => {alert(error,this)}) // console.log(res) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) if (_this.usbNum == i + 1) { // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } } else { forData.append('images', file) // let res = await upload2Pdf(formData) // _this.cite.selectedFile.push(res) // if(_this.usbNum == i+1) { // // 转码结束 // _this.cite.loadingSta = { // sta: false, // } // _this.$router.push({ // name: 'argument', // }) // } // console.log('打印文件', this.cite.selectedFile, res) } } if (this.name == '扫描打印') { let res = await images2Pdf(forData).catch(error => {alert(error,this)}) _this.cite.selectedFile.push(res) // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } }, async readPDF(url) { // 请求接口 //将文件转为pdf const res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) if (res.data.previewPath) { this.pdfUrl = res.data.previewPath + '#scrollbars=0&toolbar=0&statusbar=0' this.dialogVisible = true } // this.pdfUrl = 'https://mps.xlmalls.com/files/5447462093341142.pdf' }, // 预览图片 previewImg(url) { this.previewImgs = url this.IsPreviewImg = true }, async skip(href, name) { if (this.usbList.length > 0) { // 保存选中的U盘文件 // await this.uploadImg(this.UpFile, false) console.log('u盘') await this.dealFile() } else if (this.imgList.length > 0) { // 保存高拍仪图片 await this.uploadImg(this.imgList, true) } else if (this.cardInfo) { if(this.cftjSta) { this.cite.state = { name: '请勿重复提交!', sta: true } return }else if (this.photo) { this.cftjSta = true setTimeout(()=>{ this.cftjSta = false },3000) // 保存身份证图片 await this.exportPDF() } else { this.cite.state = { name: '正在加载,请稍后!', sta: true } return } // await this.captureAndDownload() } else { this.cite.state = { name: '请选择文件打印!', sta: true } return } console.log(href, name) // this.$router.push({ // name: href, // params: { // name: name // } // }) }, async captureAndDownload() { // const captureArea = this.$refs.sfzCanvas const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas', window.devicePixelRatio) let sca = 1 // if (window.devicePixelRatio >= 1) { // sca = 0.7 // } const canvas = await html2canvas(captureArea, { scale: sca }) console.log(canvas) // 将 canvas 转为图片 URL canvas.toBlob((blob) => { // blob将base64编码的src 以二进制的形式存进了 Blob对象 const a = document.createElement("a"); a.download = "证书.png"; a.href = window.URL.createObjectURL(blob); a.click(); console.log(blob); }, "image/png"); const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) console.log(file) this.uploadImg([file], false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) }, onChange(index, name, sta) { if (name == 'usbList') { this[name][index].sta = sta } else { this[name] = index } }, onCancel(index, name) { if (name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error this.socket.onclose = this.onljgb // 连接关闭时触发 // 监听socket消息 this.socket.onmessage = this.getMessage } }, onljgb: function () { console.log('连接关闭') // this.init() }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') // this.dyzTip = true }, getMessage: function (msg) { // console.log(msg,msg.data) if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s || '2' == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@||') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result document.getElementById('myCanvas').src = url } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, tikChange(i) { if(i==1) { shutdown().catch(error => {alert(error,this)}) }else{ this.quit() } }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, dwhs(n) { return n }, canvasSfz() { let _this = this let {cardInfo} = _this const canvas = document.getElementById('sfzCanvas') // const canvas = this.$refs.sfzCanvas; const ctx = canvas.getContext('2d'); // 在 Canvas 上进行绘图操作 ctx.fillStyle = 'transparent'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 在Canvas画布 添加图片 let img = new Image() img.src = require('@/assets/card2.png') img.onload = () => { ctx.drawImage(img, 0, 0, _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(24)+"px OCR" // 更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式 ctx.textBaseline = 'middle' ctx.fontWeight = '100' ctx.fillStyle = "#333" ctx.fillText(cardInfo.xbmc, _this.dwhs(120), _this.dwhs(120)) ctx.fillText(cardInfo.mzmc, _this.dwhs(245), _this.dwhs(120)) let name = cardInfo.address let num = 11 let w = ctx.measureText(cardInfo.address).width if(w>_this.dwhs(500)) { ctx.fillText(name, _this.dwhs(20), _this.dwhs(345)) }else{ let t1 = name.substring(0, num); let t2 = name.substring(num); ctx.fillText(t1, _this.dwhs(120), _this.dwhs(220)) ctx.fillText(t2, _this.dwhs(120), _this.dwhs(255)) } ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.name, _this.dwhs(120), _this.dwhs(65)) ctx.font = _this.dwhs(26)+"px OCR" ctx.fillText(cardInfo.birthday.substring(0, 4), _this.dwhs(120), _this.dwhs(170)) if (cardInfo.birthday.substring(4, 5) == 0) { ctx.fillText(cardInfo.birthday.substring(5, 6), _this.dwhs(220), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(4, 6), _this.dwhs(210), _this.dwhs(170)) } if (cardInfo.birthday.substring(6, 7) == 0) { ctx.fillText(cardInfo.birthday.substring(7, 8), _this.dwhs(280), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(6, 8), _this.dwhs(270), _this.dwhs(170)) } let img2 = new Image() // img2.src = _this.photo img2.src = require('@/assets/card1.png') img2.onload = () => { ctx.drawImage(img2, _this.dwhs(410), _this.dwhs(60), _this.dwhs(192), _this.dwhs(238)) let img3 = new Image() img3.src = require('@/assets/card1.png') img3.onload = () => { ctx.drawImage(img3, 0, _this.dwhs(495), _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.issueOrg, _this.dwhs(260), _this.dwhs(797)) ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), _this.dwhs(260), _this.dwhs(850)) ctx.fillText('-', _this.dwhs(405), _this.dwhs(848)) ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), _this.dwhs(415), _this.dwhs(850)) canvas.style.letterSpacing = "2px"; ctx.font = _this.dwhs(32)+"px STHeiti" ctx.fillText(cardInfo.idNum, _this.dwhs(210), _this.dwhs(345)) // canvas.toBlob(function (blob) { // // 图片ajax上传 // _this.uploadImg([blob], false) // },'image/png'); } } } }, sfzCard2() { let _this = this let res = { errorMsg: 'OK', resultContent: { address: '江西省赣州市寻乌县长宁镇镇山路14号402室', birthday: '19960515', effectDate: '20231010', expireDate: '20431010', gender: '1', idNum: '360734199605150074', issueOrg: '寻乌县公安局', name: '韩菲', nation: '01', photo: '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' } } if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await readCard() if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } else { if (this.$route.name == 'selectFile') { setTimeout(() => { this.sfzCard() }, 1000) } } }, // 图片处理 imgDeals(re) { let _this = this let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then(res => { console.log(res) _this.photo = res.previewPath // this.canvasSfz() }).catch(error => {alert(error,this)}) }, // 读取U盘 readUsb() { let data = { extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png' } readUsb(data).then(res => { // console.log(res) if (res) { if (this.UpFile.length != res.length) { // console.log(this.UpFile , res) this.UpFile = res this.usbList = [] res.forEach(re => { this.usbList.push({ name: re.name || re, size: re.size, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if (this.$route.name == 'selectFile') { setTimeout(() => { this.readUsb() }, 1000) } }).catch(error => {alert(error,this)}) }, // 处理选中文件 async dealFile() { let { usbList } = this // 判断有没有选中u盘文件 let selectUsb = usbList.some(item => { return item.sta === true }) // 没有选中 中断后续操作 并提示 if (!selectUsb) { this.cite.state = { name: '请选中文件再点击确认资料', sta: true } return } this.cite.loadingSta = { sta: true, name: '正在转码,请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) await usbList.forEach((re, i) => { if (re.sta) { this.usbNum = i this.readFile(re.name, i, re.size) } }) }, async readFile(url, i, num) { if(parseFloat(num)>5000000) { let res = await readFile2({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) }else{ let res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) } if (this.usbNum == i) { // 转码结束 this.cite.loadingSta = { sta: false } this.$router.push({ name: 'argument' }) } }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, destroyed() { // 销毁监听 if (this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.cite.modeName == '扫描打印') { this.init() } else if (this.cite.modeName == '身份证打印') { this.cftjSta = false const addr = require('../assets/audio/IdCardReaderGuide.mp3') this.play(addr) this.sfzCard() } else if (this.cite.modeName == 'U盘打印') { this.readUsb() const addr = require('../assets/audio/Remind4PluginUSB.mp3') this.play(addr) } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti'; //自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype'); //定义好文件的相对地址 } @font-face { font-family: 'OCR'; //自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 1rem 0; overflow-y: scroll; .li { padding-left: 1rem; .name { min-height: 1.8rem; text-align: left; max-width: 80%; margin-left: 1rem; } img { width: 1.3rem; margin-left: 1rem; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { //width: 42.81rem; width: 20rem; margin: 0 10rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: 0.9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: 0.8rem; left: 8rem; letter-spacing: 0.2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; //left: 60px; right: 0; height: 100%; //font-size: 12px; text-align: left; left: 3.75rem; font-size: 0.75rem; .name { //font-size: 14px; font-family: 'STHeiti'; //margin: 23px 0 10px; font-size: 0.875rem; margin: 1.4375rem 0 0.625rem; } .gender { div { //margin-left: 50px; margin-left: 3.125rem; } } .birth { //margin: 12px 0; margin: 0.9rem 0 0.8rem; font-size: 0.85rem; span { //margin-right: 3px; margin-right: 0.1875rem; } div { //width: 20px; //margin-left: 9px; text-align: center; width: 1.25rem; margin-left: 0.5625rem; } } .addr { //width: 140px; //line-height: 18px; width: 8.75rem; line-height: 1.125rem; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 2.875rem; font-size: 1rem; letter-spacing: 0.0625rem; bottom: 1.5rem; } .avatar { position: absolute; //right: 20px; //width: 96px; //top: 30px; right: 1.25rem; width: 6rem; top: 1.875rem; } } .diamond2 { //left: 130px; height: auto; top: auto; //bottom: 20px; left: 8.125rem; bottom: 1.25rem; font-size: 0.8rem; font-family: 'STHeiti'; .sign { //margin-bottom: 14px; margin-bottom: 0.875rem; } } } } .dyImg { position: fixed; top: 100%; left: 100%; margin: 0; //width: 40rem; //height: 70.8rem; width: 640px; height: 900px; padding: 300px 450px 0; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; right: 0; height: 100%; text-align: left; left: 7.5rem; font-size: 1.5rem; .name { font-family: 'STHeiti'; font-size: 28px; margin: 50px 0 20px; } .gender { div { margin-left: 100px; } } .birth { margin: 24px 0 22px; font-size: 26px; span { margin-right: 6px; } div { margin-left: 18px; width: 40px; text-align: center; } } .addr { width: 280px; line-height: 36px; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 92px; font-size: 32px; letter-spacing: 2px; bottom: 46px; } .avatar { position: absolute; right: 40px; width: 192px; top: 60px; } } .diamond2 { height: auto; top: auto; left: 260px; bottom: 36px; font-size: 28px; font-weight: 400; font-family: 'STHeiti'; .sign { margin-bottom: 25px; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 99; .content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); .content-header { margin-top: 1rem; } } } // 预览图片 .previewImg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; > img { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } } // 竖屏 .vertical-width-direction { width: 95% !important; flex-direction: column; height: 78rem !important; padding-bottom: 10rem; padding-top: 8rem; justify-content: space-around; } .vertical-bottom-btn { margin-right: 0 !important; } .vertical-margin-right { margin-right: 0 !important; } .vertical-margin-left { margin-left: 0 !important; } .vertical-tip-width { width: 32rem !important; } .vertical-tip-font { text-align: left !important; } .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; .curtain { background: #000; width: 100%; height: 100%; opacity: 0.3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -12rem; width: 38.56rem; height: 24rem; background: #ffffff; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } .btn { width: 16rem; height: 3rem; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; cursor: pointer; } } } </style>
<template> <!-- 选取资料--> <div class="selectFile"> <navbar :name="name" /> <!-- U盘打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == 'U盘打印'"> <div :class="['tip', { 'vertical-tip-width': isVertical }]" style="width: 20rem"> <div class="title">温馨提示</div> <div :class="['content', { 'vertical-tip-font': isVertical }]">请在右侧文件浏览区,找到待印资料文件存放的目录(文件夹),然后点选您需要打印的文件,之后按下“确认资料”按钮来提交资料。</div> </div> <div :class="['file', { 'vertical-margin-left': isVertical }]"> <div class="main" style="width: 50rem"> <div v-for="(item, index) in usbList" v-bind:key="index" class="li flex-start"> <input type="checkbox" v-model="item.sta" /> <div class="name flex-start" @click="readPDF(item.name)">{{ item.name }}</div> </div> </div> <div class="flex-between but"> <div class="btn flex-center" @click="skip('argument', name)">确认资料</div> </div> </div> </div> <!-- 扫描打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '扫描打印'"> <div :class="['file2', { 'vertical-margin-right': isVertical }]"> <div class="title flex-between"> 已完成扫描的版面 <span :class="[{ act: smfyIndex == -1 }]" @click="onChange(-1, 'smfyIndex')">预览</span> </div> <div class="main flex-between"> <div class="smfyData"> <div v-for="(item, index) in imgList" v-bind:key="index" :class="['flex-center', { act: smfyIndex == index }]" @click="onChange(index, 'smfyIndex')"> <div class="name">{{ index + 1 }}</div> <span @click="onCancel(index, 'imgList')">删除</span> </div> </div> <img v-show="smfyIndex != -1" :src="imgList[smfyIndex]" alt="" style="width: 25rem; height: 100%" @click="previewImg(imgList[smfyIndex])" /> <img v-show="smfyIndex == -1" id="myCanvas" style="width: 25rem; height: 100%" /> </div> </div> <div class="tip tip2"> <div class="title">温馨提示</div> <div class="content"> 每次扫描前,可以按“预览”按钮来实时查看版面效果。已经扫描好的 页面显示在左边的列表中,您可以点击列表中的缩略图进行浏览核对, 不满意的页面可以点旁边的“删除”进行移除并重新扫描。如果有文件需要继续扫描,请按要求放置好资料后,按“继续扫描”。按照刚才的方法,重复扫描过程,直到完成了所有需要的页面。核对无误后,可以按“完成扫描”结束资料扫描工作。 </div> <div class="flex-between but"> <div class="btn flex-center" @click="paiz()">{{ imgList.length > 0 ? '继续扫描' : '开始扫描' }}</div> <div class="btn flex-center" @click="skip('argument', name)">完成扫描</div> </div> </div> </div> <!-- 身份证打印--> <div :class="['box', 'flex-center', { 'vertical-width-direction': isVertical }]" v-if="name == '身份证打印'"> <div :class="['file2', 'file3', { 'vertical-margin-right': isVertical }]" style="margin-right: 14rem"> <div class="title">请核对您的信息</div> <div class="card" v-if="cardInfo != ''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start"> {{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div> </div> <div class="birth flex-start"> <span>{{ cardInfo.birthday | joinYear }}</span> <div>{{ cardInfo.birthday | joinMonth }}</div> <div>{{ cardInfo.birthday | joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt="" /></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div> </div> </div> </div> <div> <div class="card dyImg" id="captureArea" ref="captureArea" v-if="cardInfo != ''"> <div class="card-box2"> <img src="../assets/card2.png" alt="身份证正面" /> <div class="diamond"> <div class="name">{{ cardInfo.name }}</div> <div class="gender flex-start"> {{ cardInfo.xbmc }} <div>{{ cardInfo.mzmc }}</div> </div> <div class="birth flex-start"> <span>{{ cardInfo.birthday | joinYear }}</span> <div>{{ cardInfo.birthday | joinMonth }}</div> <div>{{ cardInfo.birthday | joinDay }}</div> </div> <div class="addr">{{ cardInfo.address }}</div> <div class="idNum">{{ cardInfo.idNum }}</div> <div class="avatar"><img :src="photo" alt="" /></div> </div> </div> <div class="card-box2"> <img src="../assets/card1.png" alt="身份证反面" /> <div class="diamond diamond2"> <div class="sign">{{ cardInfo.issueOrg }}</div> <div class="date">{{ cardInfo.effectDate | joinRq }}-{{ cardInfo.expireDate | joinRq }}</div> </div> </div> </div> </div> </div> <!-- <canvas id="sfzCanvas" width="640" height="900" ref="sfzCanvas" style="position: fixed;left: 100%;top: 100%;"></canvas>--> <div class="tip"> <div class="title">温馨提示</div> <div class="content">身份证件信息读取成功,请您核对个人信息无误后,按“信息无误,继续”按钮进行后续操作。此时您可以取回您的身份证卡片并妥善保存。</div> <div class="btn flex-center" @click="skip('argument', name)">信息无误,继续</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/FileformatTransforming.mp3" /> </audio> <div v-if="dialogVisible && name === 'U盘打印'"> <div class="mask" style="width: 100%; height: 100%" @click="dialogVisible = false"> <div class="content" style="background-color: #fff; width: 70%; height: 35rem"> <div class="content-header">预览</div> <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%;resize: none;"></iframe> </div> </div> </div> <div v-if="IsPreviewImg && name === '扫描打印'"> <div class="previewImg" style="width: 100%; height: 100%; background-color: black" @click="IsPreviewImg = false"> <img :src="previewImgs" alt="" style="width: 39rem; height: 53.9rem" /> </div> </div> <div class="dyzTip" v-if="dyzTip"> <div class="curtain"></div> <div class="content"> <div class="flex-center">高拍仪检测异常信息提示</div> <div class="flex-center" style="padding: .8rem 1rem;font-weight: 500;"> 尊敬的用户您好,抱歉地通知您,系统检测到高拍仪提供的扫描打印服务状态异常,我们准备随机重启计算机来恢复扫描打印功能,请您稍后等计算机重启后重新尝试扫描打印功能,谢谢! </div> <div class="flex-between" style="margin: 4rem 2rem 0;"> <div class="btn flex-center" @click="tikChange(0)">返回首页</div> <div class="btn flex-center" @click="tikChange(1)">立即重启</div> </div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import html2canvas from 'html2canvas' import JsPDF from 'jspdf' import {changeIdPhotoBgc, images2Pdf, upload2Pdf} from '@/api/resultApi' import {readUsb, readFile, readCard, readFile2, shutdown} from '@/api/bdResultApi' import parseCardWzxx from '../utils/mz' import html2Canvas from "html2canvas"; import alert from "@/utils/alert"; export default { name: 'selectFile', components: { navbar }, provide() { return { title: this.tit, type: this.name } }, filters: { joinYear(val) { return val.substring(0, 4) }, joinMonth(val) { if (val.substring(4, 5) == 0) { return val.substring(5, 6) } return val.substring(4, 6) }, joinDay(val) { if (val.substring(6, 7) == 0) { return val.substring(7, 8) } return val.substring(6, 8) }, joinRq(val) { return val.substring(0, 4) + '.' + val.substring(4, 6) + '.' + val.substring(6, 8) } }, data() { return { isChecked: true, tit: this.cite.modeName == 'U盘打印' ? '资料选取提交' : '资料扫描提交', name: this.cite.modeName, path: this.cite.inWebURL, socket: '', imgList: [], smfyIndex: -1, photo: '', UpFile: [], cardInfo: '', usbList: [], usbTime: '', usbNum: 0, isVertical: false, dialogVisible: false, pdfUrl: '', IsPreviewImg: false, previewImgs: '', canvasData: '', dyzTip: false, } }, created() { this.isVertical = this.cite.isVertical }, methods: { getPdf(title,id){ let _this = this html2Canvas(document.querySelector(`#${id}`), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } // 删除本地存储的base64字段 let pdfData = PDF.output('datauristring')//获取base64Pdf // console.log('pdfData', pdfData) let file = _this.dataURLtoFile(pdfData,'zjz.pdf') // console.log('222',file) _this.uploadImg([file],false) // return pdfData // 导出PDF文件 // PDF.save(title + '.pdf') }) }, // 导出pdf async exportPDF() { let _this = this _this.getPdf('证件照', 'captureArea'); }, async uploadImg(data, sta) { let _this = this _this.cite.loadingSta = { sta: true, name: '正在转码,请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) let forData = new FormData() let j = data.length _this.usbNum = j for (let i = 0; i < data.length; i++) { let formData = new FormData() let file = data[i] if (sta) { // let dataURL = file.toDataURL('image/png') let name = i + '.png' file = _this.dataURLtoFile(file, name) } formData.append('file', file) // 使用数组语法添加多个文件 if (this.cite.modeName == '身份证打印') { // let res = await image2Pdf(formData) let res = await upload2Pdf(formData).catch(error => {alert(error,this)}) // console.log(res) _this.cite.selectedFile.push(res) // console.log('打印文件', this.cite.selectedFile, res) if (_this.usbNum == i + 1) { // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } } else { forData.append('images', file) // let res = await upload2Pdf(formData) // _this.cite.selectedFile.push(res) // if(_this.usbNum == i+1) { // // 转码结束 // _this.cite.loadingSta = { // sta: false, // } // _this.$router.push({ // name: 'argument', // }) // } // console.log('打印文件', this.cite.selectedFile, res) } } if (this.name == '扫描打印') { let res = await images2Pdf(forData).catch(error => {alert(error,this)}) _this.cite.selectedFile.push(res) // 转码结束 _this.cite.loadingSta = { sta: false } _this.$router.push({ name: 'argument' }) } }, async readPDF(url) { // 请求接口 //将文件转为pdf const res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) if (res.data.previewPath) { this.pdfUrl = res.data.previewPath + '#scrollbars=0&toolbar=0&statusbar=0' this.dialogVisible = true } // this.pdfUrl = 'https://mps.xlmalls.com/files/5447462093341142.pdf' }, // 预览图片 previewImg(url) { this.previewImgs = url this.IsPreviewImg = true }, async skip(href, name) { if (this.usbList.length > 0) { // 保存选中的U盘文件 // await this.uploadImg(this.UpFile, false) console.log('u盘') await this.dealFile() } else if (this.imgList.length > 0) { // 保存高拍仪图片 await this.uploadImg(this.imgList, true) } else if (this.cardInfo) { // 保存身份证图片 await this.exportPDF() // await this.captureAndDownload() } else { this.cite.state = { name: '请选择文件打印!', sta: true } return } console.log(href, name) // this.$router.push({ // name: href, // params: { // name: name // } // }) }, async captureAndDownload() { // const captureArea = this.$refs.sfzCanvas const captureArea = this.$refs.captureArea // 使用 html2canvas 将区域内容生成为图片 console.log('html2canvas', window.devicePixelRatio) let sca = 1 // if (window.devicePixelRatio >= 1) { // sca = 0.7 // } const canvas = await html2canvas(captureArea, { scale: sca }) console.log(canvas) // 将 canvas 转为图片 URL canvas.toBlob((blob) => { // blob将base64编码的src 以二进制的形式存进了 Blob对象 const a = document.createElement("a"); a.download = "证书.png"; a.href = window.URL.createObjectURL(blob); a.click(); console.log(blob); }, "image/png"); const dataURL = canvas.toDataURL('image/png') const name = 'sfz.png' const file = this.dataURLtoFile(dataURL, name) console.log(file) this.uploadImg([file], false) }, dataURLtoFile(dataURL, filename) { const arr = dataURL.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) }, onChange(index, name, sta) { if (name == 'usbList') { this[name][index].sta = sta } else { this[name] = index } }, onCancel(index, name) { if (name == 'imgList') { this.smfyIndex = -1 } this[name].splice(index, 1) }, paiz() { this.socket.send('Capture@2') }, init: function () { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket') } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error this.socket.onclose = this.onljgb // 连接关闭时触发 // 监听socket消息 this.socket.onmessage = this.getMessage } }, onljgb: function () { console.log('连接关闭') // this.init() }, open: function () { // console.log("socket连接成功") this.socket.send('OpenIdCardEx@0') this.socket.send('OpenDevice@1') this.socket.send('SetResolution@2@2592@1944') this.socket.send('OpenVideo') this.socket.send('RotateRight') this.socket.send('Deskew') }, error: function () { console.log('连接错误') // this.dyzTip = true }, getMessage: function (msg) { // console.log(msg,msg.data) if (typeof msg.data == 'string') { if (msg.data.indexOf('GetDevCount') == 0) { let s = msg.data.substring(12) if ('1' == s || '2' == s) { //如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备 alert('检测到已经连接上摄像头') } } else if (msg.data.indexOf('Capture') == 0) { let s = msg.data.substring(8) if (s) { this.imgList.push('data:image/jpeg;base64,' + s) } } else if (msg.data.indexOf('MoveDetectEvent') == 0) { this.socket.send('Capture@2') } else if (msg.data.indexOf('IdCardEvent') == 0) { this.socket.send('UnFaceDetect') } else if (msg.data.indexOf('ReadIdCard') == 0) { let s = msg.data.substring(11) if ('1' == s) { this.socket.send('GetIdCardResult@||') this.socket.send('GetIdCardImage@2') } } else if (msg.data.indexOf('GetIdCardResult') == 0) { let s = msg.data.substring(16) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetBarcode') == 0) { // alert(msg.data); let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetIdCardImage') == 0) { let s = msg.data.substring(15) let arr = s.split('#') let faceImg = arr[0] let myimg = document.getElementById('myCanvas3') myimg.src = 'data:image/jpeg;base64,' + faceImg } else if (msg.data.indexOf('GetBase64') == 0) { let s = msg.data.substring(10) let myimg = document.getElementById('myCanvas2') myimg.src = 'data:image/jpeg;base64,' + s alert(s) } else if (msg.data.indexOf('GetRecognitionFromFileName') == 0) { let s = msg.data.substring(27) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetOcrFromFileName') == 0) { let s = msg.data.substring(19) let info = document.getElementById('info') info.value = s } else if (msg.data.indexOf('GetDogSN') == 0) { let s = msg.data.substring(11) let info = document.getElementById('info') info.value = s } } else { let reader = new FileReader() reader.onload = function (msg) { if (msg.target.readyState == FileReader.DONE) { let url = msg.target.result document.getElementById('myCanvas').src = url } } reader.readAsDataURL(msg.data) } }, close: function () { // console.log("socket已经关闭") this.socket.close() this.socket = '' }, tikChange(i) { if(i==1) { shutdown().catch(error => {alert(error,this)}) }else{ this.quit() } }, handleFileChange(event) { let file = event.target.files[0] if (file) { this.UpFile.push(file) } }, dwhs(n) { return n }, canvasSfz() { let _this = this let {cardInfo} = _this const canvas = document.getElementById('sfzCanvas') // const canvas = this.$refs.sfzCanvas; const ctx = canvas.getContext('2d'); // 在 Canvas 上进行绘图操作 ctx.fillStyle = 'transparent'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 在Canvas画布 添加图片 let img = new Image() img.src = require('@/assets/card2.png') img.onload = () => { ctx.drawImage(img, 0, 0, _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(24)+"px OCR" // 更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式 ctx.textBaseline = 'middle' ctx.fontWeight = '100' ctx.fillStyle = "#333" ctx.fillText(cardInfo.xbmc, _this.dwhs(120), _this.dwhs(120)) ctx.fillText(cardInfo.mzmc, _this.dwhs(245), _this.dwhs(120)) let name = cardInfo.address let num = 11 let w = ctx.measureText(cardInfo.address).width if(w>_this.dwhs(500)) { ctx.fillText(name, _this.dwhs(20), _this.dwhs(345)) }else{ let t1 = name.substring(0, num); let t2 = name.substring(num); ctx.fillText(t1, _this.dwhs(120), _this.dwhs(220)) ctx.fillText(t2, _this.dwhs(120), _this.dwhs(255)) } ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.name, _this.dwhs(120), _this.dwhs(65)) ctx.font = _this.dwhs(26)+"px OCR" ctx.fillText(cardInfo.birthday.substring(0, 4), _this.dwhs(120), _this.dwhs(170)) if (cardInfo.birthday.substring(4, 5) == 0) { ctx.fillText(cardInfo.birthday.substring(5, 6), _this.dwhs(220), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(4, 6), _this.dwhs(210), _this.dwhs(170)) } if (cardInfo.birthday.substring(6, 7) == 0) { ctx.fillText(cardInfo.birthday.substring(7, 8), _this.dwhs(280), _this.dwhs(170)) }else{ ctx.fillText(cardInfo.birthday.substring(6, 8), _this.dwhs(270), _this.dwhs(170)) } let img2 = new Image() // img2.src = _this.photo img2.src = require('@/assets/card1.png') img2.onload = () => { ctx.drawImage(img2, _this.dwhs(410), _this.dwhs(60), _this.dwhs(192), _this.dwhs(238)) let img3 = new Image() img3.src = require('@/assets/card1.png') img3.onload = () => { ctx.drawImage(img3, 0, _this.dwhs(495), _this.dwhs(640), _this.dwhs(405)) ctx.font = _this.dwhs(28)+"px STHeiti" ctx.fillText(cardInfo.issueOrg, _this.dwhs(260), _this.dwhs(797)) ctx.fillText(cardInfo.effectDate.substring(0, 4) + '.' + cardInfo.effectDate.substring(4, 6) + '.' + cardInfo.effectDate.substring(6, 8), _this.dwhs(260), _this.dwhs(850)) ctx.fillText('-', _this.dwhs(405), _this.dwhs(848)) ctx.fillText(cardInfo.expireDate.substring(0, 4) + '.' + cardInfo.expireDate.substring(4, 6) + '.' + cardInfo.expireDate.substring(6, 8), _this.dwhs(415), _this.dwhs(850)) canvas.style.letterSpacing = "2px"; ctx.font = _this.dwhs(32)+"px STHeiti" ctx.fillText(cardInfo.idNum, _this.dwhs(210), _this.dwhs(345)) // canvas.toBlob(function (blob) { // // 图片ajax上传 // _this.uploadImg([blob], false) // },'image/png'); } } } }, sfzCard2() { let _this = this let res = { errorMsg: 'OK', resultContent: { address: '江西省赣州市寻乌县长宁镇镇山路14号402室', birthday: '19960515', effectDate: '20231010', expireDate: '20431010', gender: '1', idNum: '360734199605150074', issueOrg: '寻乌县公安局', name: '韩菲', nation: '01', photo: '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' } } if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } }, // 获取身份证信息 async sfzCard() { let _this = this let res = await readCard() if (res.errorMsg == 'OK') { // console.log(res.resultContent) _this.imgDeals(res.resultContent.photo) _this.cardInfo = parseCardWzxx(res.resultContent) } else { if (this.$route.name == 'selectFile') { setTimeout(() => { this.sfzCard() }, 1000) } } }, // 图片处理 imgDeals(re) { let _this = this let file = this.dataURLtoFile('data:image/png;base64,' + re, 'sfzTx.png') let formData = new FormData() formData.append('file', file) formData.append('colorEnum', 'CLEAR') changeIdPhotoBgc(formData).then(res => { console.log(res) _this.photo = res.previewPath // this.canvasSfz() }).catch(error => {alert(error,this)}) }, // 读取U盘 readUsb() { let data = { extensions: 'pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,png' } readUsb(data).then(res => { // console.log(res) if (res) { if (this.UpFile.length != res.length) { // console.log(this.UpFile , res) this.UpFile = res this.usbList = [] res.forEach(re => { this.usbList.push({ name: re.name || re, size: re.size, sta: false }) }) } } else { this.UpFile = [] this.usbList = [] this.cite.state = { name: '请插入U盘', sta: true } } if (this.$route.name == 'selectFile') { setTimeout(() => { this.readUsb() }, 1000) } }).catch(error => {alert(error,this)}) }, // 处理选中文件 async dealFile() { let { usbList } = this // 判断有没有选中u盘文件 let selectUsb = usbList.some(item => { return item.sta === true }) // 没有选中 中断后续操作 并提示 if (!selectUsb) { this.cite.state = { name: '请选中文件再点击确认资料', sta: true } return } this.cite.loadingSta = { sta: true, name: '正在转码,请稍后' } const addr = require('../assets/audio/FileformatTransforming.mp3') this.play(addr) await usbList.forEach((re, i) => { if (re.sta) { this.usbNum = i this.readFile(re.name, i, re.size) } }) }, async readFile(url, i, num) { if(parseFloat(num)>5000000) { let res = await readFile2({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) }else{ let res = await readFile({ filePath: url }).catch(error => {alert(error,this)}) this.cite.selectedFile.push(res.data) } if (this.usbNum == i) { // 转码结束 this.cite.loadingSta = { sta: false } this.$router.push({ name: 'argument' }) } }, play(addr) { let music = new Audio() music = addr this.$refs.audio.src = music this.$refs.audio.play() } }, destroyed() { // 销毁监听 if (this.socket) { this.close() } }, mounted() { this.cite.selectedFile = [] if (this.cite.modeName == '扫描打印') { this.init() } else if (this.cite.modeName == '身份证打印') { const addr = require('../assets/audio/IdCardReaderGuide.mp3') this.play(addr) this.sfzCard() } else if (this.cite.modeName == 'U盘打印') { this.readUsb() const addr = require('../assets/audio/Remind4PluginUSB.mp3') this.play(addr) } } } </script> <style scoped lang="less"> @font-face { font-family: 'STHeiti'; //自定义字体名字 src: url('../assets/typeface/STHeiti.ttf') format('truetype'); //定义好文件的相对地址 } @font-face { font-family: 'OCR'; //自定义字体名字 src: url('../assets/typeface/OCR-B-10-BT.ttf') format('truetype'); //定义好文件的相对地址 } .selectFile { .box { width: 114.06rem; height: 42.13rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 0 auto; .tip { //margin-right: 15.31rem; width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { margin: 3rem auto 59px; text-align: center; } } .file { margin-left: 9.69rem; .main { width: 31.63rem; height: 26.56rem; background: #ffffff; border: 0.06rem solid #707070; margin: 0 auto 2.81rem; padding: 1rem 0; overflow-y: scroll; .li { padding-left: 1rem; .name { min-height: 1.8rem; text-align: left; max-width: 80%; margin-left: 1rem; } img { width: 1.3rem; margin-left: 1rem; } } } } .tip2 { width: 52rem; .but { .btn { width: 24.44rem; position: relative; input { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; } } } } .file2 { margin-right: 9.69rem; .title { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; //text-align: left; span { text-decoration: underline; font-size: 1.5rem; font-weight: bold; color: #323232; line-height: 2rem; } .act { color: #52a39d; } } .main { width: 39.81rem; height: 31.31rem; background: #eeeeee; margin: 1.38rem auto 0; } .card { //width: 42.81rem; width: 20rem; margin: 0 10rem; height: 35.31rem; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box { width: 25rem; height: 15rem; margin-right: 5rem; position: relative; font-weight: 500; font-size: 0.9rem; line-height: 1rem; .card-title { padding: 1rem 0; } img { width: 25rem; } .card-sign { position: absolute; bottom: 2.6rem; left: 10.5rem; } .card-date { position: absolute; bottom: 0.5rem; left: 10.5rem; } .card-name { position: absolute; top: 2.2rem; left: 4.5rem; } .card-gender { position: absolute; top: 4.1rem; left: 4.5rem; span { margin-left: 5rem; } } .card-birth { position: absolute; top: 6.15rem; left: 4.5rem; .month { margin-left: 1.7rem; } .day { margin-left: 1.2rem; } } .card-addr { width: 11rem; position: absolute; top: 8.1rem; left: 4.5rem; text-align: left; line-height: 1.3rem; } .card-id { position: absolute; bottom: 0.8rem; left: 8rem; letter-spacing: 0.2rem; } .card-avatar { position: absolute; top: 3.2rem; right: 2rem; width: 7rem; height: 9rem; img { width: 7rem; height: 9rem; background-size: contain; } } } .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; //left: 60px; right: 0; height: 100%; //font-size: 12px; text-align: left; left: 3.75rem; font-size: 0.75rem; .name { //font-size: 14px; font-family: 'STHeiti'; //margin: 23px 0 10px; font-size: 0.875rem; margin: 1.4375rem 0 0.625rem; } .gender { div { //margin-left: 50px; margin-left: 3.125rem; } } .birth { //margin: 12px 0; margin: 0.9rem 0 0.8rem; font-size: 0.85rem; span { //margin-right: 3px; margin-right: 0.1875rem; } div { //width: 20px; //margin-left: 9px; text-align: center; width: 1.25rem; margin-left: 0.5625rem; } } .addr { //width: 140px; //line-height: 18px; width: 8.75rem; line-height: 1.125rem; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 2.875rem; font-size: 1rem; letter-spacing: 0.0625rem; bottom: 1.5rem; } .avatar { position: absolute; //right: 20px; //width: 96px; //top: 30px; right: 1.25rem; width: 6rem; top: 1.875rem; } } .diamond2 { //left: 130px; height: auto; top: auto; //bottom: 20px; left: 8.125rem; bottom: 1.25rem; font-size: 0.8rem; font-family: 'STHeiti'; .sign { //margin-bottom: 14px; margin-bottom: 0.875rem; } } } } .dyImg { position: fixed; top: 100%; left: 100%; margin: 0; //width: 40rem; //height: 70.8rem; width: 640px; height: 900px; padding: 300px 450px 0; display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end; .card-box2 { position: relative; font-family: 'OCR'; margin: 0 auto; img { width: 100%; } .diamond { position: absolute; top: 0; right: 0; height: 100%; text-align: left; left: 7.5rem; font-size: 1.5rem; .name { font-family: 'STHeiti'; font-size: 28px; margin: 50px 0 20px; } .gender { div { margin-left: 100px; } } .birth { margin: 24px 0 22px; font-size: 26px; span { margin-right: 6px; } div { margin-left: 18px; width: 40px; text-align: center; } } .addr { width: 280px; line-height: 36px; } .idNum { position: absolute; font-family: 'STHeiti'; font-weight: 500; left: 92px; font-size: 32px; letter-spacing: 2px; bottom: 46px; } .avatar { position: absolute; right: 40px; width: 192px; top: 60px; } } .diamond2 { height: auto; top: auto; left: 260px; bottom: 36px; font-size: 28px; font-weight: 400; font-family: 'STHeiti'; .sign { margin-bottom: 25px; } } } } } .file3 { margin-right: 28.13rem; .main { width: 20.75rem; height: 28.88rem; border: 0.06rem solid #707070; margin: 1.06rem 0 0 13.38rem; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .smfyData { height: 90%; width: 14.81rem; font-size: 1rem; font-weight: bold; color: #323232; line-height: 2rem; overflow: auto; cursor: pointer; .act { color: #52a39d; } .name { text-decoration: underline; } span { margin-left: 5rem; } } } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 99; .content { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); .content-header { margin-top: 1rem; } } } // 预览图片 .previewImg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; > img { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } } // 竖屏 .vertical-width-direction { width: 95% !important; flex-direction: column; height: 78rem !important; padding-bottom: 10rem; padding-top: 8rem; justify-content: space-around; } .vertical-bottom-btn { margin-right: 0 !important; } .vertical-margin-right { margin-right: 0 !important; } .vertical-margin-left { margin-left: 0 !important; } .vertical-tip-width { width: 32rem !important; } .vertical-tip-font { text-align: left !important; } .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; .curtain { background: #000; width: 100%; height: 100%; opacity: 0.3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -12rem; width: 38.56rem; height: 24rem; background: #ffffff; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } .btn { width: 16rem; height: 3rem; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; cursor: pointer; } } } </style>
Show line notes below