han

hanfei / VueSharedPrinting

Browse code han master
1 parent 6365b73 commit a7951d72273dea661f92446db047cc8d3ac0f68a hanfei authored on 10 Feb

Patch

Showing 8 changed files

Ignore Space Show notes View src/components/global.vue
<template> <div> <!-- 打印中提示--> <div v-if="(DYZshow && DYZlist)" class="dyzTip"> <div class="curtain"></div> <div class="content"> <img alt="" src="../assets/printing.png"/> <p v-if="orderInfo.downTimeSecond>300" class="dlTip flex-center">目前网络断开，尝试重连已超时({{ orderInfo.downTimeSecond }}S)，系统将 <en>自动终结此次打印</en> </p> <p v-else-if="orderInfo.downTimeSecond>120" class="dlTip flex-center">目前网络断开，尝试重连超时({{ orderInfo.downTimeSecond }}S)，可以继续等待或即刻 <span class="flex-center" @click="stopProgram()">终止打印</span></p> <p v-else-if="!orderInfo.netStatus&&citeL.zxPage" class="dlTip flex-center"> 目前网络断开，尝试重连超时({{ orderInfo.downTimeSecond \|\| 0 }}S)</p> <div v-if="ztyc" style="margin: 1rem;text-align: left;"> <div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;"> <p>订单编号 {{ orderInfo.taskCode }}</p> <p>时间 {{ ycTime }}</p> </div> <div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;"> <p>异常原因 {{ orderInfo.abnormalReason }}</p> </div> <div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;"> 用户您好，抱歉地通知您：系统检测到打印遇到了异常问题，正在打印中的订单和排队即将处理的订单，都将转变为取件码再次自助打印的订单（取件码可通过小程序【我的】\打印记录-预约记录找到），您可以稍后等机器恢复正常后使用取件码重新打印文件。 </div> <div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;"> 您也可以通过小程序首页的更多服务-微信客服，联系客服人员进行问题沟通和跟进处理。 </div> </div> <div v-else class="taskBox"> <div class="text1">{{ `NO.1文档打印机总进度` }}</div> <div class="progressContainer"> <div :style="{ width: `${(lastPrintList.length/printBackList.length)100}%`}" class="progressBar"></div> </div> <div class="fileBox"> <div class="file"> <div class="text2"> 任务 {{ `${currentPrint + 1}/${printBackList.length}: ${lastPrintList[lastPrintList.length]?.sourceFileName \|\| ''}` }} {{ orderInfo.currentTaskFileName }} </div> <div class="text3">{{ downLoadMessage \|\| '' }}</div> <div class="JDT"> <span v-show="progressType=='real'&&progressPercentage=='100'" :style="'width:0'"></span> <span v-show="progressType=='real'&&progressPercentage!='100'" :style="'width:' + progressPercentage +'%'"></span> <span v-show="progressType=='fake'" :style="'width: 100%'"></span> </div> </div> </div> </div> <div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </div> </div> <!-- 敏感词提示--> <div v-if="mgcData.show" class="dyzTip flex-center"> <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 v-if="confirmDia" class="dyzTip flex-center"> <div class="curtain"></div> <div class="content" style="margin-top: 0;top: 20%;height: auto; padding: 1rem 0 2.5rem;"> <div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem; padding-bottom: 1rem;"> 请问是否确认即刻重启机器恢复服务？ </div> <div style="display: flex; justify-content: center;"> <div class="btn flex-center" style="margin: 0; width: 12rem; margin-right: 2rem;" @click="onJqztDo">立即重启</div> <div class="btn flex-center" style="margin: 0; width: 12rem;" @click="confirmDia = false">取消</div> </div> </div> </div> <!-- 重启恢复服务--> <div v-if="citeL.cqjqSta" class="dyzTip flex-center"> <div class="curtain"></div> <div class="content3 flex-between"> <div class="box box1"> <img alt="" class="onClose" src="../assets/close.png" @click="onJqzt(0)"> <div class="tit flex-start">输入设备基础维护码授权重启操作</div> <div class="myInput flex-center"><input v-model="qjmData" disabled placeholder="请输入维护码授权重启操作" type="text"> </div> <div class="tip flex-start">提醒:该操作适用于在打印遇到问题时，复位重启机器以恢复正常打印服务，请确认是否继续该操作?</div> <div class="btn flex-center" @click="onJqzt(1)">马上重启恢复服务</div> </div> <div class="box box2 flex-between"> <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div> </div> </div> </div> <!-- 小程序支付--> <div v-if="zfShow" class="dyzTip"> <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 alt="" class="icon" src="../assets/demo10.png" @click="onChange('zfShow', false)"/> </p> </div> </div> <!-- 提示--> <div v-if="state.sta" class="tkTip flex-center"> <div v-if="state.name">{{ state.name }}</div> <div v-if="state.name2" style="width: 50%;margin-top: 3%;">{{ state.name2 }}</div> </div> <!-- 页面加载中--> <div v-if="citeL.loadingSta.sta" class="dyzTip"> <div class="curtain"></div> <div class="loadingDH"> <!-- 绘制齿轮 --> <div class="load"> <div class="gear first"> <svg id="purple" fill="#afb4db" viewbox="0 0 100 100"> <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" fill="#FFB5C5" viewbox="0 0 100 100"> <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" fill="#fedcbd" viewbox="0 0 100 100"> <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" fill="transparent" filter="url(#blur)" r="66" stroke="white" stroke-width="40"> </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 {getAdvertisement, getDeviceByCode, getEnterKey} from '@/api/resultApi' import VueQr from 'vue-qr' import {getDeviceCode, bdGetDeviceAndOrder, printOrderList, bdSocket, bdStop} from '@/api/bdResultApi' import alert from '../utils/alert' import {bdStopProgram} from "../api/bdResultApi"; export default { name: 'global', components: { VueQr }, data() { return { isOnLine: false, intervalTask: null, currentTaskCode: null, currentPrint: null, taskCode: null, progressInterval: null, progressPercentage: 0, progressType: 'real', downLoadMessage: '', printBackList: [], lastPrintList: [], client: null, code: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: { name: '', sta: false }, src: '', zfShow: false, DYZlist: [], DYZlist2: [], DYZlistNum: 1, Progress: { rate: '0%' }, djsM: { num: 0, total: 0, rate: '0%' }, numZt: 120, ztyc: false, citeL: { loadingSta: { sta: false, name: 'Loading' } }, mgcData: { show: false, re: '尊敬的用户您好，打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容，打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情，系统审核通过即分配取件码。凭借取件码，可以稍后在任意一台打印服务终端上通过' }, orderInfo: '', ycTime: '', numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'], qjmData: '', csSTA: true, confirmDia: false, } }, 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) }, mounted() { console.log('开始定时任务???'); }, methods: { stopProgram() { bdStopProgram().then(() => { }) }, 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 > 20) { return } _this.qjmData = _this.qjmData + num }, onTip(name, time) { let _this = this _this.state.sta = true _this.state.name = name setTimeout(() => { _this.state.sta = false }, time) }, onJqzt(num) { console.log('onJqzt', num) if (num === 0) { this.citeL.cqjqSta = false } else if (num === 1) { let {qjmData} = this if (this.state.sta) { return; } if (!qjmData) { this.onTip('请输入维护码授权重启操作！', 3000) return } getEnterKey({keys: qjmData}).then(res => { if (res) { this.qjmData = '' this.citeL.cqjqSta = false this.confirmDia = true } else { this.onTip('维护码不正确的，请重新确认！', 3000) } }) } }, onJqztDo() { this.confirmDia = false bdStop().then(() => { this.onTip('重启命令已发出', 3000) }) }, add(t) { if (t < 10) { return '0' + t } return t }, format() { let that = this let date = new Date(); let o = { "y": date.getFullYear(), //年 "M": that.add(date.getMonth() + 1), //月份 "d": that.add(date.getDate()), //日 "h": that.add(date.getHours()), //小时 "m": that.add(date.getMinutes()), //分 }; return o.y + '/' + o.M + '/' + o.d + ' ' + o.h + ':' + o.m }, getDeviceAndOrder() { let that = this; bdGetDeviceAndOrder().then(res => { let {deviceStatus, hasOrder, taskCode, currentTask, downLoadMessage, downTimeSecond, time} = res; if (hasOrder) {// 先判断是否有订单进来 if (downTimeSecond > 310 && that.csSTA) { that.csSTA = false that.stopProgram() } else { that.csSTA = true } if (deviceStatus == 'ABNORMAL') { if (!that.cite.ztyc) { that.ycTime = this.format() that.numZt = 120 that.onNum() } that.cite.ztyc = true } else if (taskCode) { if (taskCode == that.taskCode) {//非新任务 if (currentTask) { // console.log('progressPercentage???', that.progressPercentage); let completeItem = that.printBackList[that.currentPrint]; if (currentTask == that.currentTaskCode) {//非新的打印文件 // if (deviceStatus == "RUN") { // this.progressType='real' // } else { // this.progressType='fake' // } } else {//新的打印文件 if(that.progressPercentage>0&&that.progressPercentage!=100) { that.progressPercentage = 100 }else{ that.currentTaskCode = currentTask; that.currentPrint = Number(currentTask.slice(-1)); that.lastPrintList = [...that.lastPrintList, completeItem]; if(time>0) { that.startProgress(time); } } } } } else {//获取新任务的数据并显示打印框 that.getPrintList(taskCode); that.DYZshow = true; } } } else {// 没有订单不显示打印框 if (that.progressPercentage < 100) { that.progressType = 'fake'; that.progressPercentage = 100 } else { that.progressType = 'real'; that.DYZshow = false; that.cite.ztyc = false; that.lastPrintList = []; } } that.isOnLine = deviceStatus; that.cite.deviceStatus = deviceStatus; that.downLoadMessage = downLoadMessage; that.orderInfo = res that.cite.orderInfoTop = res }).catch(error => { alert(error, that) }) bdSocket().then(res => { let {content, idCard, mgc, refreshAD, scan, udisk, complete} = res if (idCard) { // 跳转到身份证打印 this.cite.modeName = '身份证打印' that.$router.push({ name: 'operationGuide', params: { name: '身份证打印' } }) } else if (refreshAD) { // 立即刷新广告 this.getAdvertisement() } else if (scan) { // 跳转到扫描打印 this.cite.modeName = '扫描打印' this.$router.push({ name: 'operationGuide', params: { name: '扫描打印' } }) } else if (udisk) { // 跳转到U盘打印 this.cite.modeName = 'U盘打印' this.$router.push({ name: 'operationGuide', params: { name: 'U盘打印' } }) } else if (mgc) { // 是否敏感词 this.mgcData = { show: true, re: content } this.numZt = 30 this.onNum() } else if (complete) { this.$router.push({ name: 'complete' }) } }).catch(error => { console.log(error) }) }, getPrintList() { printOrderList().then(res => { let {printBackList, code} = res; // console.log('getPrintList????', res); if (code != this.taskCode) { this.taskCode = code; printBackList.map((item) => { item.complete = false }); this.printBackList = printBackList; this.lastPrintList = []; this.DYZshow = true; console.log('printBackList????', printBackList); } }).catch(error => { alert(error, this) }) }, startProgress(duration) { console.log('duration???', duration); duration = duration 1000; // 转换成毫秒 let interval = duration / 100; // 每增加1%所需的毫秒数 this.progressPercentage = 0; this.progressInterval = setInterval(() => { if (this.progressPercentage >= 100) { this.progressType = 'fake' this.progressPercentage = 0; clearInterval(this.progressInterval); // 完成时清除定时器 } else { this.progressType = 'real' this.progressPercentage += 1; } }, interval); }, 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 }, toLoad() { // this.cite.code = '20240326-066184'; //'20240430-940955';// // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } // this.mgcData = { // show: true, // re: '铭感次提示' // } // this.numZt = 30 // this.onNum() // this.DYZshow = true 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.zxPage = this.cite.onChange(this.code) 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(() => { this.getDeviceAndOrder(); 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) } }, //获取设备信息 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) this.$refs.audio.play() } } } </script> <style lang="less" scoped> .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; } .btn2 { margin: 0; width: 14rem; } .JDT { width: 100%; margin: 1rem auto 0; height: 1rem; border-radius: 1rem; position: relative; border: 1px solid #323232; overflow: hidden; span { position: absolute; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); top: 0; left: 0; bottom: 0; transition: width 0.5s ease; } } .taskBox { text-align: left; margin: unset; .progressContainer { width: 96%; height: 16px; background-color: #EBEBEB; border-radius: 10px; overflow: hidden; margin: 0 auto; } .progressBar { height: 100%; /* 高度 / background: repeating-linear-gradient(130deg, / 斜线角度 / #1DC98F, / 黄色 / #1DC98F 10px, / 黄色条纹宽度 / #2CD89E 10px, / 橙色开始位置 / #2CD89E 20px / 橙色条纹宽度 /); width: 0; / 进度条的宽度，可以根据需要调整 / transition: width 2s ease; / 平滑过渡效果 / margin: unset; } .fileBox { width: 100%; padding: 20px 30px; box-sizing: border-box; margin: unset; } } .text1 { font-weight: bold; font-size: 20px; color: #333333; margin: 10px; } .text2 { font-weight: bold; font-size: 18px; color: #333333; margin: 10px 0; } .text3 { font-weight: bold; font-size: 14px; color: #666666; margin: 10px 0; } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } .content3 { position: absolute; left: 50%; top: 50%; height: 29.375rem; width: 55rem; margin-top: -14.6875rem; margin-left: -27.5rem; align-items: flex-end; .box { background: #FFFFFF; border-radius: 1.25rem; text-align: left; position: relative; .tit { font-weight: bold; font-size: 1.25rem; color: #333333; line-height: 1.25rem; border-left: 0.125rem solid #56A599; padding-left: 0.625rem; } .myInput { padding: 0 0.9375rem; height: 3.125rem; background: #FFFFFF; border-radius: 0.3125rem; border: 0.0625rem solid #EAEDEC; margin: 1.875rem 0; input { width: 100%; height: 100%; border: 0; background: none; font-weight: 500; font-size: 1.125rem; line-height: 1.125rem; } } .tip { border-top: 0.0625rem solid #E8E8E8; padding: 1.875rem 0 4.375rem; font-weight: 500; font-size: 1.125rem; color: #FF0000; line-height: 1.5rem; } .btn { background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%); width: 100%; height: 3.125rem; border-radius: 0.625rem; font-weight: bold; font-size: 1.5rem; color: #FFFFFF; line-height: 1.5rem; } .li { width: 3.625rem; height: 3.625rem; background: #F7F7F9; border-radius: 0.625rem; font-weight: bold; font-size: 1.5rem; color: #333333; line-height: 1.125rem; margin-bottom: 1.25rem; cursor: pointer; } .onClose { position: absolute; width: 28px; top: 20px; right: 20px; } } .box1 { width: 33.125rem; height: 25.625rem; padding: 3.75rem 2.1875rem 0; } .box2 { width: 13.125rem; flex-wrap: wrap; padding: 1.25rem 1.875rem 0; } } .dlTip { position: absolute; left: 20px; right: 20px; margin-top: -60px; font-family: Source Han Sans SC; font-weight: 400; font-size: 17px; color: #333333; line-height: 20px; height: 41px; background: rgba(255, 255, 255, 80%); border-radius: 10px; span { height: 30px; background: #FA1D1D; border-radius: 15px; padding: 0 10px; margin-left: 16px; font-weight: 400; font-size: 16px; color: #FFFFFF; line-height: 10px; } en { color: #FF0000; } } } .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 v-if="(DYZshow && DYZlist)" class="dyzTip"> <div class="curtain"></div> <div class="content"> <img alt="" src="../assets/printing.png"/> <p v-if="orderInfo.downTimeSecond>300" class="dlTip flex-center">目前网络断开，尝试重连已超时({{ orderInfo.downTimeSecond }}S)，系统将 <en>自动终结此次打印</en> </p> <p v-else-if="orderInfo.downTimeSecond>120" class="dlTip flex-center">目前网络断开，尝试重连超时({{ orderInfo.downTimeSecond }}S)，可以继续等待或即刻 <span class="flex-center" @click="stopProgram()">终止打印</span></p> <p v-else-if="!orderInfo.netStatus&&citeL.zxPage" class="dlTip flex-center"> 目前网络断开，尝试重连超时({{ orderInfo.downTimeSecond \|\| 0 }}S)</p> <div v-if="ztyc" style="margin: 1rem;text-align: left;"> <div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;"> <p>订单编号 {{ orderInfo.taskCode }}</p> <p>时间 {{ ycTime }}</p> </div> <div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;"> <p>异常原因 {{ orderInfo.abnormalReason }}</p> </div> <div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;"> 用户您好，抱歉地通知您：系统检测到打印遇到了异常问题，正在打印中的订单和排队即将处理的订单，都将转变为取件码再次自助打印的订单（取件码可通过小程序【我的】\打印记录-预约记录找到），您可以稍后等机器恢复正常后使用取件码重新打印文件。 </div> <div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;"> 您也可以通过小程序首页的更多服务-微信客服，联系客服人员进行问题沟通和跟进处理。 </div> </div> <div v-else class="taskBox"> <div class="text1">{{ `NO.1文档打印机总进度` }}</div> <div class="progressContainer"> <div :style="{ width: `${(lastPrintList.length/printBackList.length)100}%`}" class="progressBar"></div> </div> <div class="fileBox"> <div class="file"> <div class="text2"> 任务 {{ `${currentPrint + 1}/${printBackList.length}: ${lastPrintList[lastPrintList.length]?.sourceFileName \|\| ''}` }} {{ orderInfo.currentTaskFileName }} </div> <div class="text3">{{ downLoadMessage \|\| '' }}</div> <div class="JDT"> <span v-show="progressType=='real'&&progressPercentage=='100'" :style="'width:0'"></span> <span v-show="progressType=='real'&&progressPercentage!='100'" :style="'width:' + progressPercentage +'%'"></span> <span v-show="progressType=='fake'" :style="'width: 100%'"></span> </div> </div> </div> </div> <div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </div> </div> <!-- 敏感词提示--> <div v-if="mgcData.show" class="dyzTip flex-center"> <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 v-if="confirmDia" class="dyzTip flex-center"> <div class="curtain"></div> <div class="content" style="margin-top: 0;top: 20%;height: auto; padding: 1rem 0 2.5rem;"> <div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem; padding-bottom: 1rem;"> 请问是否确认即刻重启机器恢复服务？ </div> <div style="display: flex; justify-content: center;"> <div class="btn flex-center" style="margin: 0; width: 12rem; margin-right: 2rem;" @click="onJqztDo">立即重启</div> <div class="btn flex-center" style="margin: 0; width: 12rem;" @click="confirmDia = false">取消</div> </div> </div> </div> <!-- 重启恢复服务--> <div v-if="citeL.cqjqSta" class="dyzTip flex-center"> <div class="curtain"></div> <div class="content3 flex-between"> <div class="box box1"> <img alt="" class="onClose" src="../assets/close.png" @click="onJqzt(0)"> <div class="tit flex-start">输入设备基础维护码授权重启操作</div> <div class="myInput flex-center"><input v-model="qjmData" disabled placeholder="请输入维护码授权重启操作" type="text"> </div> <div class="tip flex-start">提醒:该操作适用于在打印遇到问题时，复位重启机器以恢复正常打印服务，请确认是否继续该操作?</div> <div class="btn flex-center" @click="onJqzt(1)">马上重启恢复服务</div> </div> <div class="box box2 flex-between"> <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div> </div> </div> </div> <!-- 小程序支付--> <div v-if="zfShow" class="dyzTip"> <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 alt="" class="icon" src="../assets/demo10.png" @click="onChange('zfShow', false)"/> </p> </div> </div> <!-- 提示--> <div v-if="state.sta" class="tkTip flex-center"> <div v-if="state.name">{{ state.name }}</div> <div v-if="state.name2" style="width: 50%;margin-top: 3%;">{{ state.name2 }}</div> </div> <!-- 页面加载中--> <div v-if="citeL.loadingSta.sta" class="dyzTip"> <div class="curtain"></div> <div class="loadingDH"> <!-- 绘制齿轮 --> <div class="load"> <div class="gear first"> <svg id="purple" fill="#afb4db" viewbox="0 0 100 100"> <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" fill="#FFB5C5" viewbox="0 0 100 100"> <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" fill="#fedcbd" viewbox="0 0 100 100"> <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" fill="transparent" filter="url(#blur)" r="66" stroke="white" stroke-width="40"> </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 {getAdvertisement, getDeviceByCode, getEnterKey} from '@/api/resultApi' import VueQr from 'vue-qr' import {getDeviceCode, bdGetDeviceAndOrder, printOrderList, bdSocket, bdStop} from '@/api/bdResultApi' import alert from '../utils/alert' import {bdStopProgram} from "../api/bdResultApi"; export default { name: 'global', components: { VueQr }, data() { return { isOnLine: false, intervalTask: null, currentTaskCode: null, currentPrint: null, taskCode: null, progressInterval: null, progressPercentage: 0, progressType: 'real', downLoadMessage: '', printBackList: [], lastPrintList: [], client: null, code: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: { name: '', sta: false }, src: '', zfShow: false, DYZlist: [], DYZlist2: [], DYZlistNum: 1, Progress: { rate: '0%' }, djsM: { num: 0, total: 0, rate: '0%' }, numZt: 120, ztyc: false, citeL: { loadingSta: { sta: false, name: 'Loading' } }, mgcData: { show: false, re: '尊敬的用户您好，打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容，打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情，系统审核通过即分配取件码。凭借取件码，可以稍后在任意一台打印服务终端上通过' }, orderInfo: '', ycTime: '', numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'], qjmData: '', csSTA: true, confirmDia: false, } }, 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) }, mounted() { console.log('开始定时任务???'); }, methods: { stopProgram() { bdStopProgram().then(() => { }) }, 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 > 20) { return } _this.qjmData = _this.qjmData + num }, onTip(name, time) { let _this = this _this.state.sta = true _this.state.name = name setTimeout(() => { _this.state.sta = false }, time) }, onJqzt(num) { console.log('onJqzt', num) if (num === 0) { this.citeL.cqjqSta = false } else if (num === 1) { let {qjmData} = this if (this.state.sta) { return; } if (!qjmData) { this.onTip('请输入维护码授权重启操作！', 3000) return } getEnterKey({keys: qjmData}).then(res => { if (res) { this.qjmData = '' this.citeL.cqjqSta = false this.confirmDia = true } else { this.onTip('维护码不正确的，请重新确认！', 3000) } }) } }, onJqztDo() { this.confirmDia = false bdStop().then(() => { this.onTip('重启命令已发出', 3000) }) }, add(t) { if (t < 10) { return '0' + t } return t }, format() { let that = this let date = new Date(); let o = { "y": date.getFullYear(), //年 "M": that.add(date.getMonth() + 1), //月份 "d": that.add(date.getDate()), //日 "h": that.add(date.getHours()), //小时 "m": that.add(date.getMinutes()), //分 }; return o.y + '/' + o.M + '/' + o.d + ' ' + o.h + ':' + o.m }, getDeviceAndOrder() { let that = this; bdGetDeviceAndOrder().then(res => { let {deviceStatus, hasOrder, taskCode, currentTask, downLoadMessage, downTimeSecond, time} = res; if (hasOrder) {// 先判断是否有订单进来 if (downTimeSecond > 310 && that.csSTA) { that.csSTA = false that.stopProgram() } else { that.csSTA = true } if (deviceStatus == 'ABNORMAL') { if (!that.cite.ztyc) { that.ycTime = this.format() that.numZt = 120 that.onNum() } that.cite.ztyc = true } else if (taskCode) { if (taskCode == that.taskCode) {//非新任务 if (currentTask) { // console.log('progressPercentage???', that.progressPercentage); let completeItem = that.printBackList[that.currentPrint]; if (currentTask == that.currentTaskCode) {//非新的打印文件 // if (deviceStatus == "RUN") { // this.progressType='real' // } else { // this.progressType='fake' // } } else {//新的打印文件 if(that.progressPercentage>0&&that.progressPercentage!=100) { that.progressPercentage = 100 }else{ that.currentTaskCode = currentTask; that.currentPrint = Number(currentTask.slice(-1)); that.lastPrintList = [...that.lastPrintList, completeItem]; if(time>0) { that.startProgress(time); } } } } } else {//获取新任务的数据并显示打印框 that.getPrintList(taskCode); that.DYZshow = true; } } } else {// 没有订单不显示打印框 if (that.progressPercentage < 100) { that.progressType = 'fake'; that.progressPercentage = 100 } else { that.progressType = 'real'; that.DYZshow = false; that.cite.ztyc = false; that.lastPrintList = []; } } that.isOnLine = deviceStatus; that.cite.deviceStatus = deviceStatus; that.downLoadMessage = downLoadMessage; that.orderInfo = res that.cite.orderInfoTop = res }).catch(error => { alert(error, that) }) bdSocket().then(res => { let {content, idCard, mgc, refreshAD, scan, udisk, complete} = res if (idCard) { // 跳转到身份证打印 this.cite.modeName = '身份证打印' that.$router.push({ name: 'operationGuide', params: { name: '身份证打印' } }) } else if (refreshAD) { // 立即刷新广告 this.getAdvertisement() } else if (scan) { // 跳转到扫描打印 this.cite.modeName = '扫描打印' this.$router.push({ name: 'operationGuide', params: { name: '扫描打印' } }) } else if (udisk) { // 跳转到U盘打印 this.cite.modeName = 'U盘打印' this.$router.push({ name: 'operationGuide', params: { name: 'U盘打印' } }) } else if (mgc) { // 是否敏感词 this.mgcData = { show: true, re: content } this.numZt = 30 this.onNum() } else if (complete) { this.$router.push({ name: 'complete' }) } }).catch(error => { console.log(error) }) }, getPrintList() { printOrderList().then(res => { let {printBackList, code} = res; // console.log('getPrintList????', res); if (code != this.taskCode) { this.taskCode = code; printBackList.map((item) => { item.complete = false }); this.printBackList = printBackList; this.lastPrintList = []; this.DYZshow = true; console.log('printBackList????', printBackList); } }).catch(error => { alert(error, this) }) }, startProgress(duration) { console.log('duration???', duration); duration = duration * 1000; // 转换成毫秒 let interval = duration / 100; // 每增加1%所需的毫秒数 this.progressPercentage = 0; this.progressInterval = setInterval(() => { if (this.progressPercentage >= 100) { this.progressType = 'fake' this.progressPercentage = 0; clearInterval(this.progressInterval); // 完成时清除定时器 } else { this.progressType = 'real' this.progressPercentage += 1; } }, interval); }, 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 }, toLoad() { // this.cite.code = '20240326-066184'; //'20240430-940955';// // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } // this.mgcData = { // show: true, // re: '铭感次提示' // } // this.numZt = 30 // this.onNum() // this.DYZshow = true 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.zxPage = this.cite.onChange(this.code) 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(() => { this.getDeviceAndOrder(); 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) } }, //获取设备信息 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) this.$refs.audio.play() } } } </script> <style lang="less" scoped> .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; } .btn2 { margin: 0; width: 14rem; } .JDT { width: 100%; margin: 1rem auto 0; height: 1rem; border-radius: 1rem; position: relative; border: 1px solid #323232; overflow: hidden; span { position: absolute; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); top: 0; left: 0; bottom: 0; transition: width 0.5s ease; } } .taskBox { text-align: left; margin: unset; .progressContainer { width: 96%; height: 16px; background-color: #EBEBEB; border-radius: 10px; overflow: hidden; margin: 0 auto; } .progressBar { height: 100%; /* 高度 / background: repeating-linear-gradient(130deg, / 斜线角度 / #1DC98F, / 黄色 / #1DC98F 10px, / 黄色条纹宽度 / #2CD89E 10px, / 橙色开始位置 / #2CD89E 20px / 橙色条纹宽度 /); width: 0; / 进度条的宽度，可以根据需要调整 / transition: width 2s ease; / 平滑过渡效果 */ margin: unset; } .fileBox { width: 100%; padding: 20px 30px; box-sizing: border-box; margin: unset; } } .text1 { font-weight: bold; font-size: 20px; color: #333333; margin: 10px; } .text2 { font-weight: bold; font-size: 18px; color: #333333; margin: 10px 0; } .text3 { font-weight: bold; font-size: 14px; color: #666666; margin: 10px 0; } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } .content3 { position: absolute; left: 50%; top: 50%; height: 29.375rem; width: 55rem; margin-top: -14.6875rem; margin-left: -27.5rem; align-items: flex-end; .box { background: #FFFFFF; border-radius: 1.25rem; text-align: left; position: relative; .tit { font-weight: bold; font-size: 1.25rem; color: #333333; line-height: 1.25rem; border-left: 0.125rem solid #56A599; padding-left: 0.625rem; } .myInput { padding: 0 0.9375rem; height: 3.125rem; background: #FFFFFF; border-radius: 0.3125rem; border: 0.0625rem solid #EAEDEC; margin: 1.875rem 0; input { width: 100%; height: 100%; border: 0; background: none; font-weight: 500; font-size: 1.125rem; line-height: 1.125rem; } } .tip { border-top: 0.0625rem solid #E8E8E8; padding: 1.875rem 0 4.375rem; font-weight: 500; font-size: 1.125rem; color: #FF0000; line-height: 1.5rem; } .btn { background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%); width: 100%; height: 3.125rem; border-radius: 0.625rem; font-weight: bold; font-size: 1.5rem; color: #FFFFFF; line-height: 1.5rem; } .li { width: 3.625rem; height: 3.625rem; background: #F7F7F9; border-radius: 0.625rem; font-weight: bold; font-size: 1.5rem; color: #333333; line-height: 1.125rem; margin-bottom: 1.25rem; cursor: pointer; } .onClose { position: absolute; width: 28px; top: 20px; right: 20px; } } .box1 { width: 33.125rem; height: 25.625rem; padding: 3.75rem 2.1875rem 0; } .box2 { width: 13.125rem; flex-wrap: wrap; padding: 1.25rem 1.875rem 0; } } .dlTip { position: absolute; left: 20px; right: 20px; margin-top: -60px; font-family: Source Han Sans SC; font-weight: 400; font-size: 17px; color: #333333; line-height: 20px; height: 41px; background: rgba(255, 255, 255, 80%); border-radius: 10px; span { height: 30px; background: #FA1D1D; border-radius: 15px; padding: 0 10px; margin-left: 16px; font-weight: 400; font-size: 16px; color: #FFFFFF; line-height: 10px; } en { color: #FF0000; } } } .tkTip { position: fixed; top: 5%; width: 100%; z-index: 99; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } .loadingDH { position: absolute; top: 30%; width: 100%; .load { position: relative; margin: 3.125rem auto; width: 6.25rem; height: 5rem; .gear { position: absolute; z-index: -10; width: 2.5rem; height: 2.5rem; -webkit-animation: spin 5s infinite; animation: spin 5s infinite; } .second { left: 2.5rem; width: 5rem; height: 5rem; -webkit-animation: spin-reverse 5s infinite; animation: spin-reverse 5s infinite; } .third { top: 2.8125rem; left: -0.625rem; width: 3.75rem; height: 3.75rem; } @-webkit-keyframes spin { 50% { transform: rotate(360deg); } } @keyframes spin { 50% { transform: rotate(360deg); } } @-webkit-keyframes spin-reverse { 50% { transform: rotate(-360deg); } } @keyframes spin-reverse { 50% { transform: rotate(-360deg); } } .lil-circle { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white; width: 6.25rem; height: 6.25rem; opacity: 0.65; } .blur-circle { position: absolute; top: -1.1875rem; left: -1.1875rem; } } .text { color: lightgray; font-size: 1.125rem; font-family: 'Open Sans', sans-serif; text-align: center; padding-top: 3rem; } } </style>

Ignore Space Show notes View

src/components/global.vue

<template>
  <div>
    
    <div v-if="(DYZshow && DYZlist)" class="dyzTip">
      <div class="curtain"></div>
      <div class="content">
        <img alt="" src="../assets/printing.png"/>
        <p v-if="orderInfo.downTimeSecond>300" class="dlTip flex-center">目前网络断开，尝试重连已超时({{
            orderInfo.downTimeSecond
          }}S)，系统将
          <en>自动终结此次打印</en>
        </p>
        <p v-else-if="orderInfo.downTimeSecond>120" class="dlTip flex-center">目前网络断开，尝试重连超时({{
            orderInfo.downTimeSecond
          }}S)，可以继续等待或即刻 <span class="flex-center" @click="stopProgram()">终止打印</span></p>
        <p v-else-if="!orderInfo.netStatus&&citeL.zxPage" class="dlTip flex-center">
          目前网络断开，尝试重连超时({{ orderInfo.downTimeSecond || 0 }}S)</p>

<div v-if="ztyc" style="margin: 1rem;text-align: left;">
          <div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;">
            <p>订单编号 {{ orderInfo.taskCode }}</p>
            <p>时间 {{ ycTime }}</p>
          </div>
          <div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;">
            <p>异常原因 {{ orderInfo.abnormalReason }}</p>
          </div>
          <div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;">
            用户您好，抱歉地通知您：系统检测到打印遇到了异常问题，正在打印中的订单和排队即将处理的订单，都将转变为取件码再次自助打印的订单（取件码可通过小程序【我的】\打印记录-预约记录找到），您可以稍后等机器恢复正常后使用取件码重新打印文件。
          </div>
          <div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;">
            您也可以通过小程序首页的更多服务-微信客服，联系客服人员进行问题沟通和跟进处理。
          </div>
        </div>
        <div v-else class="taskBox">
          <div class="text1">{{ `NO.1文档打印机总进度` }}</div>
          <div class="progressContainer">
            <div :style="{ width: `${(lastPrintList.length/printBackList.length)*100}%`}" class="progressBar"></div>
          </div>
          <div class="fileBox">
            <div class="file">
              <div class="text2">
                任务
                {{
                  `${currentPrint + 1}/${printBackList.length}: ${lastPrintList[lastPrintList.length]?.sourceFileName || ''}`
                }}
                {{ orderInfo.currentTaskFileName }}
              </div>
              <div class="text3">{{ downLoadMessage || '' }}</div>
              <div class="JDT">
                <span v-show="progressType=='real'&&progressPercentage=='100'" :style="'width:0'"></span>
                <span v-show="progressType=='real'&&progressPercentage!='100'" :style="'width:' + progressPercentage +'%'"></span>
                <span v-show="progressType=='fake'" :style="'width: 100%'"></span>
              </div>
            </div>
          </div>
        </div>

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

<div v-if="mgcData.show" class="dyzTip flex-center">
      <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 v-if="confirmDia" class="dyzTip flex-center">
      <div class="curtain"></div>
      <div class="content" style="margin-top: 0;top: 20%;height: auto; padding: 1rem 0 2.5rem;">
        <div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem; padding-bottom: 1rem;">
          请问是否确认即刻重启机器恢复服务？
        </div>
        <div style="display: flex; justify-content: center;">
          <div class="btn flex-center" style="margin: 0; width: 12rem; margin-right: 2rem;" @click="onJqztDo">立即重启</div>
          <div class="btn flex-center" style="margin: 0; width: 12rem;" @click="confirmDia = false">取消</div>
        </div>
      </div>
    </div>

<div v-if="citeL.cqjqSta" class="dyzTip flex-center">
      <div class="curtain"></div>
      <div class="content3 flex-between">
        <div class="box box1">
          <img alt="" class="onClose" src="../assets/close.png" @click="onJqzt(0)">
          <div class="tit flex-start">输入设备基础维护码授权重启操作</div>
          <div class="myInput flex-center"><input v-model="qjmData" disabled placeholder="请输入维护码授权重启操作" type="text">
          </div>
          <div class="tip flex-start">提醒:该操作适用于在打印遇到问题时，复位重启机器以恢复正常打 印服务，请确认是否继续该操作?</div>
          <div class="btn flex-center" @click="onJqzt(1)">马上重启恢复服务</div>
        </div>
        <div class="box box2 flex-between">
          <div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div>
        </div>
      </div>
    </div>

<div v-if="zfShow" class="dyzTip">
      <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 alt="" class="icon" src="../assets/demo10.png" @click="onChange('zfShow', false)"/>
        </p>
      </div>
    </div>

<div v-if="state.sta" class="tkTip flex-center">
      <div v-if="state.name">{{ state.name }}</div>
      <div v-if="state.name2" style="width: 50%;margin-top: 3%;">{{ state.name2 }}</div>
    </div>

<div v-if="citeL.loadingSta.sta" class="dyzTip">
      <div class="curtain"></div>
      <div class="loadingDH">
        
        <div class="load">
          <div class="gear first">
            <svg id="purple" fill="#afb4db" viewbox="0 0 100 100">
              <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" fill="#FFB5C5" viewbox="0 0 100 100">
              <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" fill="#fedcbd" viewbox="0 0 100 100">
              <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" fill="transparent" filter="url(#blur)" r="66" stroke="white" stroke-width="40">
            </circle>
          </svg>
        </div>
        
        <div class="text">{{ citeL.loadingSta.name }}</div>
      </div>
    </div>



  </div>
</template>
<script>
import {getAdvertisement, getDeviceByCode, getEnterKey} from '@/api/resultApi'
import VueQr from 'vue-qr'
import {getDeviceCode, bdGetDeviceAndOrder, printOrderList, bdSocket, bdStop} from '@/api/bdResultApi'
import alert from '../utils/alert'
import {bdStopProgram} from "../api/bdResultApi";

export default {
  name: 'global',
  components: {
    VueQr
  },
  data() {
    return {
      isOnLine: false,
      intervalTask: null,
      currentTaskCode: null,
      currentPrint: null,
      taskCode: null,
      progressInterval: null,
      progressPercentage: 0,
      progressType: 'real',
      downLoadMessage: '',
      printBackList: [],
      lastPrintList: [],
      client: null,
      code: '',

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

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

src: '',
      zfShow: false,

DYZlist: [],
      DYZlist2: [],
      DYZlistNum: 1,
      Progress: {
        rate: '0%'
      },
      djsM: {
        num: 0,
        total: 0,
        rate: '0%'
      },
      numZt: 120,
      ztyc: false,

citeL: {
        loadingSta: {
          sta: false,
          name: 'Loading'
        }
      },
      mgcData: {
        show: false,
        re: '尊敬的用户您好，打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容，打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情，系统审核通过即分配取件码。凭借取件码，可以稍后在任意一台打印服务终端上通过'
      },

orderInfo: '',
      ycTime: '',

numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'],
      qjmData: '',
      csSTA: true,

confirmDia: false,
    }
  },
  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)
  },
  mounted() {
    console.log('开始定时任务???');
  },
  methods: {
    stopProgram() {
      bdStopProgram().then(() => {

})
    },
    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 > 20) {
        return
      }
      _this.qjmData = _this.qjmData + num
    },
    onTip(name, time) {
      let _this = this
      _this.state.sta = true
      _this.state.name = name
      setTimeout(() => {
        _this.state.sta = false
      }, time)
    },
    onJqzt(num) {
      console.log('onJqzt', num)
      if (num === 0) {
        this.citeL.cqjqSta = false
      } else if (num === 1) {
        let {qjmData} = this
        if (this.state.sta) {
          return;
        }
        if (!qjmData) {
          this.onTip('请输入维护码授权重启操作！', 3000)
          return
        }

getEnterKey({keys: qjmData}).then(res => {
          if (res) {
            this.qjmData = ''
            this.citeL.cqjqSta = false
            this.confirmDia = true
          } else {
            this.onTip('维护码不正确的，请重新确认！', 3000)
          }
        })
      }
    },
    onJqztDo() {
      this.confirmDia = false
      bdStop().then(() => {
        this.onTip('重启命令已发出', 3000)
      })
    },
    add(t) {
      if (t < 10) {
        return '0' + t
      }
      return t
    },
    format() {
      let that = this
      let date = new Date();
      let o = {
        "y": date.getFullYear(), //年
        "M": that.add(date.getMonth() + 1), //月份
        "d": that.add(date.getDate()), //日
        "h": that.add(date.getHours()), //小时
        "m": that.add(date.getMinutes()), //分
      };
      return o.y + '/' + o.M + '/' + o.d + ' ' + o.h + ':' + o.m
    },
    getDeviceAndOrder() {
      let that = this;
      bdGetDeviceAndOrder().then(res => {
        let {deviceStatus, hasOrder, taskCode, currentTask, downLoadMessage, downTimeSecond, time} = res;
        if (hasOrder) {// 先判断是否有订单进来
          if (downTimeSecond > 310 && that.csSTA) {
            that.csSTA = false
            that.stopProgram()
          } else {
            that.csSTA = true
          }
          if (deviceStatus == 'ABNORMAL') {
            if (!that.cite.ztyc) {
              that.ycTime = this.format()
              that.numZt = 120
              that.onNum()
            }
            that.cite.ztyc = true
          } else if (taskCode) {
            if (taskCode == that.taskCode) {//非新任务
              if (currentTask) {
                // console.log('progressPercentage???', that.progressPercentage);
                let completeItem = that.printBackList[that.currentPrint];
                if (currentTask == that.currentTaskCode) {//非新的打印文件
                  // if (deviceStatus == "RUN") {
                  //   this.progressType='real'
                  // } else {
                  //   this.progressType='fake'
                  // }
                } else {//新的打印文件
                  if(that.progressPercentage>0&&that.progressPercentage!=100) {
                    that.progressPercentage = 100
                  }else{
                    that.currentTaskCode = currentTask;
                    that.currentPrint = Number(currentTask.slice(-1));
                    that.lastPrintList = [...that.lastPrintList, completeItem];
                    if(time>0) {
                      that.startProgress(time);
                    }
                  }
                }
              }
            } else {//获取新任务的数据并显示打印框
              that.getPrintList(taskCode);
              that.DYZshow = true;
            }
          }
        } else {// 没有订单不显示打印框
          if (that.progressPercentage < 100) {
            that.progressType = 'fake';
            that.progressPercentage = 100
          } else {
            that.progressType = 'real';
            that.DYZshow = false;
            that.cite.ztyc = false;
            that.lastPrintList = [];
          }
        }
        that.isOnLine = deviceStatus;
        that.cite.deviceStatus = deviceStatus;
        that.downLoadMessage = downLoadMessage;
        that.orderInfo = res
        that.cite.orderInfoTop = res
      }).catch(error => {
        alert(error, that)
      })
      bdSocket().then(res => {
        let {content, idCard, mgc, refreshAD, scan, udisk, complete} = res
        if (idCard) {
          // 跳转到身份证打印
          this.cite.modeName = '身份证打印'
          that.$router.push({
            name: 'operationGuide',
            params: {
              name: '身份证打印'
            }
          })
        } else if (refreshAD) {
          // 立即刷新广告
          this.getAdvertisement()
        } else if (scan) {
          // 跳转到扫描打印
          this.cite.modeName = '扫描打印'
          this.$router.push({
            name: 'operationGuide',
            params: {
              name: '扫描打印'
            }
          })
        } else if (udisk) {
          // 跳转到U盘打印
          this.cite.modeName = 'U盘打印'
          this.$router.push({
            name: 'operationGuide',
            params: {
              name: 'U盘打印'
            }
          })
        } else if (mgc) {
          // 是否敏感词
          this.mgcData = {
            show: true,
            re: content
          }
          this.numZt = 30
          this.onNum()
        } else if (complete) {
          this.$router.push({
            name: 'complete'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getPrintList() {
      printOrderList().then(res => {
        let {printBackList, code} = res;
        // console.log('getPrintList????', res);
        if (code != this.taskCode) {
          this.taskCode = code;
          printBackList.map((item) => {
            item.complete = false
          });
          this.printBackList = printBackList;
          this.lastPrintList = [];
          this.DYZshow = true;
          console.log('printBackList????', printBackList);
        }
      }).catch(error => {
        alert(error, this)
      })
    },
    startProgress(duration) {
      console.log('duration???', duration);
      duration = duration * 1000; // 转换成毫秒
      let interval = duration / 100; // 每增加1%所需的毫秒数
      this.progressPercentage = 0;
      this.progressInterval = setInterval(() => {
        if (this.progressPercentage >= 100) {
          this.progressType = 'fake'
          this.progressPercentage = 0;
          clearInterval(this.progressInterval); // 完成时清除定时器
        } else {
          this.progressType = 'real'
          this.progressPercentage += 1;
        }
      }, interval);
    },
    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
    },
    toLoad() {
      // this.cite.code = '20240326-066184'; //'20240430-940955';//
      // this.cite.code = 'TZLC001'
      // this.code = this.cite.code
      // this.load()
      // this.cite.loadingSta = {
      //   sta: false
      // }
      // this.mgcData = {
      //   show: true,
      //   re: '铭感次提示'
      // }
      // this.numZt = 30
      // this.onNum()
      // this.DYZshow = true

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.zxPage = this.cite.onChange(this.code)
        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(() => {
          this.getDeviceAndOrder();
          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)
      }
    },
    //获取设备信息
    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)
      this.$refs.audio.play()
    }
  }
}
</script>

.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;
    }

.btn2 {
      margin: 0;
      width: 14rem;
    }

.JDT {
      width: 100%;
      margin: 1rem auto 0;
      height: 1rem;
      border-radius: 1rem;
      position: relative;
      border: 1px solid #323232;
      overflow: hidden;

span {
        position: absolute;
        background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
        top: 0;
        left: 0;
        bottom: 0;
        transition: width 0.5s ease;
      }
    }

.taskBox {
      text-align: left;
      margin: unset;

.progressContainer {
        width: 96%;
        height: 16px;
        background-color: #EBEBEB;
        border-radius: 10px;
        overflow: hidden;
        margin: 0 auto;
      }

.progressBar {
        height: 100%;
        /* 高度 */
        background: repeating-linear-gradient(130deg,
          /* 斜线角度 */ #1DC98F,
          /* 黄色 */ #1DC98F 10px,
          /* 黄色条纹宽度 */ #2CD89E 10px,
          /* 橙色开始位置 */ #2CD89E 20px
          /* 橙色条纹宽度 */);
        width: 0;
        /* 进度条的宽度，可以根据需要调整 */
        transition: width 2s ease;
        /* 平滑过渡效果 */
        margin: unset;
      }

.fileBox {
        width: 100%;
        padding: 20px 30px;
        box-sizing: border-box;
        margin: unset;
      }
    }

.text1 {
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      margin: 10px;
    }

.text2 {
      font-weight: bold;
      font-size: 18px;
      color: #333333;
      margin: 10px 0;
    }

.text3 {
      font-weight: bold;
      font-size: 14px;
      color: #666666;
      margin: 10px 0;
    }
  }

.content2 {
    background: transparent;
    height: auto;

img {
      width: 18rem;
    }

.icon {
      width: 3rem;
      margin-top: 3rem;
    }
  }

.content3 {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 29.375rem;
    width: 55rem;
    margin-top: -14.6875rem;
    margin-left: -27.5rem;
    align-items: flex-end;

.box {
      background: #FFFFFF;
      border-radius: 1.25rem;
      text-align: left;
      position: relative;

.tit {
        font-weight: bold;
        font-size: 1.25rem;
        color: #333333;
        line-height: 1.25rem;
        border-left: 0.125rem solid #56A599;
        padding-left: 0.625rem;
      }

.myInput {
        padding: 0 0.9375rem;
        height: 3.125rem;
        background: #FFFFFF;
        border-radius: 0.3125rem;
        border: 0.0625rem solid #EAEDEC;
        margin: 1.875rem 0;

input {
          width: 100%;
          height: 100%;
          border: 0;
          background: none;
          font-weight: 500;
          font-size: 1.125rem;
          line-height: 1.125rem;
        }
      }

.tip {
        border-top: 0.0625rem solid #E8E8E8;
        padding: 1.875rem 0 4.375rem;
        font-weight: 500;
        font-size: 1.125rem;
        color: #FF0000;
        line-height: 1.5rem;
      }

.btn {
        background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%);
        width: 100%;
        height: 3.125rem;
        border-radius: 0.625rem;
        font-weight: bold;
        font-size: 1.5rem;
        color: #FFFFFF;
        line-height: 1.5rem;
      }

.li {
        width: 3.625rem;
        height: 3.625rem;
        background: #F7F7F9;
        border-radius: 0.625rem;
        font-weight: bold;
        font-size: 1.5rem;
        color: #333333;
        line-height: 1.125rem;
        margin-bottom: 1.25rem;
        cursor: pointer;
      }

.onClose {
        position: absolute;
        width: 28px;
        top: 20px;
        right: 20px;
      }
    }

.box1 {
      width: 33.125rem;
      height: 25.625rem;
      padding: 3.75rem 2.1875rem 0;
    }

.box2 {
      width: 13.125rem;
      flex-wrap: wrap;
      padding: 1.25rem 1.875rem 0;
    }
  }

.dlTip {
    position: absolute;
    left: 20px;
    right: 20px;
    margin-top: -60px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-size: 17px;
    color: #333333;
    line-height: 20px;
    height: 41px;
    background: rgba(255, 255, 255, 80%);
    border-radius: 10px;

span {
      height: 30px;
      background: #FA1D1D;
      border-radius: 15px;
      padding: 0 10px;
      margin-left: 16px;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 10px;
    }

en {
      color: #FF0000;
    }
  }
}

.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>

<div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div>
      </div>
    </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" fill="transparent" filter="url(#blur)" r="66" stroke="white" stroke-width="40">
            </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 {getAdvertisement, getDeviceByCode, getEnterKey} from '@/api/resultApi'
import VueQr from 'vue-qr'
import {getDeviceCode, bdGetDeviceAndOrder, printOrderList, bdSocket, bdStop} from '@/api/bdResultApi'
import alert from '../utils/alert'
import {bdStopProgram} from "../api/bdResultApi";