BF-添加多任务打印框

hanfei / VueSharedPrinting

Browse code BF-添加多任务打印框
1 parent dd98b3d commit 853db2c8c3e5372007b326a3a15117f2231fb4b2 Mac authored on 28 Nov

Patch

Showing 4 changed files

Ignore Space Show notes View src/api/bdResultApi.js
import request from '../utils/bdRequest' // 获取打印任务 export const getDownLoad = data => { return request({ method: 'GET', post: '8888', url: '/client/getDownLoad', params: data }) } // 获取设备编号 export const getDeviceCode = data => { return request({ method: 'GET', post: '8888', url: '/client/getDeviceCode', params: data }) } // 调用打印机打印 export const apiPrint = data => { return request({ method: 'POST', post: '8080', url: '/api/Printer/Print', data }) } // 获取身份证信息 export const readCard = data => { return request({ method: 'GET', post: '7846', url: '/api/readCard', params: data }) } // 读取U盘 export const readUsb = data => { return request({ method: 'GET', post: '8888', url: '/read/usb', params: data }) } // 本地文件获取文件流 export const readFile = data => { return request({ post: '8888', url: '/read/upload2Pdf', params: data }) } // 本地文件获取大文件oss export const readFile2 = data => { return request({ post: '8888', url: '/read/upload2PdfOss', params: data }) } // 通过文件路径下载给打印机打印 export const readDownload = data => { return request({ method: 'POST', post: '8888', url: '/read/download', params: data }) } // 高拍仪打不开调用 export const shutdown = data => { return request({ method: 'POST', post: '8888', url: '/client/shutdown', params: data }) } // 高拍仪是否异常 export const gpyError = data => { return request({ method: 'POST', post: '8888', url: '/client/error', params: data }) } // 订单状态，进度查询 export const bdGetTransactionStatus = data => { return request({ post: '8888', url: '/client/getTransactionStatus', params: data }) } // 订单-当前订单信息 export const bdGetPrintOrderPush = data => { return request({ post: '8888', url: '/client/getPrintOrderPush', params: data }) } import request from '../utils/bdRequest' // 获取设备编号 export const getDeviceCode = data => { return request({ method: 'GET', post: '8888', url: '/client/getDeviceCode', params: data }) } // 调用打印机打印 export const apiPrint = data => { return request({ method: 'POST', post: '8080', url: '/api/Printer/Print', data }) } // 获取身份证信息 export const readCard = data => { return request({ method: 'GET', post: '7846', url: '/api/readCard', params: data }) } // 读取U盘 export const readUsb = data => { return request({ method: 'GET', post: '8888', url: '/read/usb', params: data }) } // 本地文件获取文件流 export const readFile = data => { return request({ post: '8888', url: '/read/upload2Pdf', params: data }) } // 本地文件获取大文件oss export const readFile2 = data => { return request({ post: '8888', url: '/read/upload2PdfOss', params: data }) } // 通过文件路径下载给打印机打印 export const readDownload = data => { return request({ method: 'POST', post: '8888', url: '/read/download', params: data }) } // 高拍仪打不开调用 export const shutdown = data => { return request({ method: 'POST', post: '8888', url: '/client/shutdown', params: data }) } // 高拍仪是否异常 export const gpyError = data => { return request({ method: 'POST', post: '8888', url: '/client/error', params: data }) } // 订单状态，进度查询 export const bdGetTransactionStatus = data => { return request({ post: '8888', url: '/client/getTransactionStatus', params: data }) } // 订单-当前订单信息 export const bdGetPrintOrderPush = data => { return request({ post: '8888', url: '/client/getPrintOrderPush', params: data }) }

Ignore Space Show notes View

src/api/bdResultApi.js

import request from '../utils/bdRequest'

// 获取打印任务
export const getDownLoad = data => {
  return request({
    method: 'GET',
    post: '8888',
    url: '/client/getDownLoad',
    params: data
  })
}
// 获取设备编号
export const getDeviceCode = data => {
  return request({
    method: 'GET',
    post: '8888',
    url: '/client/getDeviceCode',
    params: data
  })
}
// 调用打印机打印
export const apiPrint = data => {
  return request({
    method: 'POST',
    post: '8080',
    url: '/api/Printer/Print',
    data
  })
}
// 获取身份证信息
export const readCard = data => {
  return request({
    method: 'GET',
    post: '7846',
    url: '/api/readCard',
    params: data
  })
}
// 读取U盘
export const readUsb = data => {
  return request({
    method: 'GET',
    post: '8888',
    url: '/read/usb',
    params: data
  })
}
// 本地文件获取文件流
export const readFile = data => {
  return request({
    post: '8888',
    url: '/read/upload2Pdf',
    params: data
  })
}
// 本地文件获取大文件oss
export const readFile2 = data => {
  return request({
    post: '8888',
    url: '/read/upload2PdfOss',
    params: data
  })
}
// 通过文件路径下载给打印机打印
export const readDownload = data => {
  return request({
    method: 'POST',
    post: '8888',
    url: '/read/download',
    params: data
  })
}
// 高拍仪打不开调用
export const shutdown = data => {
  return request({
    method: 'POST',
    post: '8888',
    url: '/client/shutdown',
    params: data
  })
}
// 高拍仪是否异常
export const gpyError = data => {
  return request({
    method: 'POST',
    post: '8888',
    url: '/client/error',
    params: data
  })
}

// 订单状态，进度查询
export const bdGetTransactionStatus = data => {
  return request({
    post: '8888',
    url: '/client/getTransactionStatus',
    params: data
  })
}
// 订单-当前订单信息
export const bdGetPrintOrderPush = data => {
  return request({
    post: '8888',
    url: '/client/getPrintOrderPush',
    params: data
  })
}

import request from '../utils/bdRequest'

// 获取设备编号
export const getDeviceCode = data => {
  return request({
    method: 'GET',
    post: '8888',
    url: '/client/getDeviceCode',
    params: data
  })
}
// 调用打印机打印
export const apiPrint = data => {
  return request({
    method: 'POST',
    post: '8080',
    url: '/api/Printer/Print',
    data
  })
}
// 获取身份证信息
export const readCard = data => {
  return request({
    method: 'GET',
    post: '7846',
    url: '/api/readCard',
    params: data
  })
}
// 读取U盘
export const readUsb = data => {
  return request({
    method: 'GET',
    post: '8888',
    url: '/read/usb',
    params: data
  })
}
// 本地文件获取文件流
export const readFile = data => {
  return request({
    post: '8888',
    url: '/read/upload2Pdf',
    params: data
  })
}
// 本地文件获取大文件oss
export const readFile2 = data => {
  return request({
    post: '8888',
    url: '/read/upload2PdfOss',
    params: data
  })
}
// 通过文件路径下载给打印机打印
export const readDownload = data => {
  return request({
    method: 'POST',
    post: '8888',
    url: '/read/download',
    params: data
  })
}
// 高拍仪打不开调用
export const shutdown = data => {
  return request({
    method: 'POST',
    post: '8888',
    url: '/client/shutdown',
    params: data
  })
}
// 高拍仪是否异常
export const gpyError = data => {
  return request({
    method: 'POST',
    post: '8888',
    url: '/client/error',
    params: data
  })
}

Ignore Space Show notes View src/components/global.vue
<template> <div> <!-- 打印中提示--> <div v-if="DYZshow " class="dyzTip"> <div class="curtain"></div> <div v-if="true\|\|cite.code == '20240326-066184'" class="content"> <img alt="" src="../assets/printing.png"/> <div v-for="(task,tIdx) in DYZlist" :key="tIdx" class="taskBox"> <div class="text1">{{ `NO.${tIdx+1}文档打印机总进度` }}</div> <div class="progressContainer"> <div class="progressBar" :style="{width: `${((DYZlistNum-DYZlist.length)/DYZlistNum)100}%`}"></div> </div> <div class="fileBox"> <div class="file"> <div class="text2"> 任务 <span v-for="(item,index) in DYZlist2" :key="index" :style="Progress.taskCode==item.code?'':'display:none;'">{{index+1}}</span> {{`/${DYZlistNum}: ${DYZlist[0].sourceFileName}`}} </div> <div class="text3">{{downloaded}}</div> <div v-if="djsM.total<1" class="JDT" style="width: 100%;"><span :style="'width:' + '80%'"></span></div> </div> </div> </div> </div> <div v-else class="content"> <img alt="" src="../assets/printing.png"/> <img alt="" src="../assets/printing.png"/> <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 v-if="djsM.total<1" class="JDT"><span :style="'width:' + Progress.rate"></span></div> <div v-else class="JDT"><span :style="'width:' + djsM.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 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="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="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="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 mqtt from 'mqtt/dist/mqtt' import {getAdvertisement, getDeviceByCode, getTransactionStatus} from '@/api/resultApi' import VueQr from 'vue-qr' import {bdGetPrintOrderPush, bdGetTransactionStatus, getDeviceCode, getDownLoad} from '@/api/bdResultApi' import alert from '../utils/alert' export default { name: 'global', components: { VueQr }, data() { return { client: null, code: '', DYZshow: true,// false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: { name: '', sta: false }, src: '', zfShow: false, DYZlist: [ // { // "taskCode": "20241127181155592951-0", // "taskStatus": "INTERRUPT", // "code": "20241127181155592951", // "status": null, // "interruptReason": null, // "complete": 0, // "expectedTime": 6, // "fileSize": 0.0, // "readSize": 0.0, // "sourceFileName": "温馨提示.docx", // "order": 1, // "taskCount": 1 // }, // { // "taskCode": "20241127181155592951-0", // "taskStatus": "INTERRUPT", // "code": "20241127181155592951", // "status": null, // "interruptReason": null, // "complete": 0, // "expectedTime": 6, // "fileSize": 0.0, // "readSize": 0.0, // "sourceFileName": "温馨提示.docx", // "order": 1, // "taskCount": 1 // }, ], DYZlist2: [], DYZlistNum: 1, downloaded:'', Progress: { rate: '0%' }, djsM: { num: 0, total: 0, rate: '0%' }, 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) } }) getDownLoad().then(res => { console.log('res:???',res); this.downloaded = res; }).catch(error => { alert(error, this) }) }, 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.addTime() // 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) }) getDownLoad().then(res => { console.log('res:???',res); this.downloaded = res; }).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) } }, // 加时间进度条 addTime() { setTimeout(() => { if (this.djsM.total > this.djsM.num) { this.djsM.num = this.djsM.num + 1 this.djsM.rate = (this.djsM.num / this.djsM.total) 100 + '%' this.addTime() } }, 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 => { console.log('正在重连') if (error) { console.log('正在重连', error) } }) //连接失败提醒 this.client.on('error', error => { console.log('连接失败') if (error) { console.log('连接失败', error) } setTimeout(() => { console.log('尝试重新连接') this.client.connect(); }, 5000); // 5秒后尝试重新连接 }) //接收消息 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) { // this.cite.serveError = true this.cite.serveError = false } else { this.cite.serveError = false } } else if (data.cmd == 'ORDER_INFO' \|\| data.cmd == 'START_ORDER') { //小程序支付 if (this.DYZshow) { return } this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length let timeN = 0 data.printTaskPushList.forEach(item => { if (item.time) { timeN = timeN + parseFloat(item.time) } }) this.djsM = { num: 0, total: timeN, rate: '0%' } console.log('进度条', this.djsM) if (timeN > 0) { this.addTime() } // 提示语音 // 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) // 判断弹框是否显示 if (!this.DYZshow) { this.orderPush() } this.Progress = data if (data.rate == '99%') { setTimeout(() => { if (this.Progress.rate == '99%') { this.Progress.rate = '100%' } }, 1500) } } }) }, orderPush() { bdGetPrintOrderPush().then(data => { console.log('bdGetPrintOrderPush', data) if (data.code) { this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length // 提示语音 // 3秒查询订单状态 this.ddcx(data.code) // 订单状态，进度查询 this.ddycztcx(data.code) } }) }, //订阅多个主题 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 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; } .JDT { width: 80%; 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: 1s ease-in-out; } } .taskBox{ text-align: left; margin: unset; .progressContainer { width: 100%; height: 30px; background-color: #EBEBEB ; /* 背景颜色 / border-radius: 5px; / 圆角 / overflow: hidden; / 隐藏溢出部分 / margin: unset; / 外边距 / } .progressBar { height: 100%; / 高度 / background: repeating-linear-gradient( 130deg, / 斜线角度 / #ffcc00, / 黄色 / #ffcc00 10px, / 黄色条纹宽度 / #ff9900 10px, / 橙色开始位置 / #ff9900 20px / 橙色条纹宽度 / ); width: 70%; / 进度条的宽度，可以根据需要调整 / transition: width 0.5s 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; } } } .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"/> <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 v-if="djsM.total<1" class="JDT"><span :style="'width:' + Progress.rate"></span></div> <div v-else class="JDT"><span :style="'width:' + djsM.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 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="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="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="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 mqtt from 'mqtt/dist/mqtt' import {getAdvertisement, getDeviceByCode, getTransactionStatus} from '@/api/resultApi' import VueQr from 'vue-qr' import {bdGetPrintOrderPush, 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: { rate: '0%' }, djsM: { num: 0, total: 0, rate: '0%' }, 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.addTime() // 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) } }, // 加时间进度条 addTime() { setTimeout(() => { if (this.djsM.total > this.djsM.num) { this.djsM.num = this.djsM.num + 1 this.djsM.rate = (this.djsM.num / this.djsM.total) 100 + '%' this.addTime() } }, 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 => { console.log('正在重连') if (error) { console.log('正在重连', error) } }) //连接失败提醒 this.client.on('error', error => { console.log('连接失败') if (error) { console.log('连接失败', error) } setTimeout(() => { console.log('尝试重新连接') this.client.connect(); }, 5000); // 5秒后尝试重新连接 }) //接收消息 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) { // this.cite.serveError = true this.cite.serveError = false } else { this.cite.serveError = false } } else if (data.cmd == 'ORDER_INFO' \|\| data.cmd == 'START_ORDER') { //小程序支付 if (this.DYZshow) { return } this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length let timeN = 0 data.printTaskPushList.forEach(item => { if (item.time) { timeN = timeN + parseFloat(item.time) } }) this.djsM = { num: 0, total: timeN, rate: '0%' } console.log('进度条', this.djsM) if (timeN > 0) { this.addTime() } // 提示语音 // 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) // 判断弹框是否显示 if (!this.DYZshow) { this.orderPush() } this.Progress = data if (data.rate == '99%') { setTimeout(() => { if (this.Progress.rate == '99%') { this.Progress.rate = '100%' } }, 1500) } } }) }, orderPush() { bdGetPrintOrderPush().then(data => { console.log('bdGetPrintOrderPush', data) if (data.code) { this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length // 提示语音 // 3秒查询订单状态 this.ddcx(data.code) // 订单状态，进度查询 this.ddycztcx(data.code) } }) }, //订阅多个主题 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 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; } .JDT { width: 80%; 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: 1s ease-in-out; } } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; z-index: 99; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } .loadingDH { position: absolute; top: 30%; width: 100%; .load { position: relative; margin: 3.125rem auto; width: 6.25rem; height: 5rem; .gear { position: absolute; z-index: -10; width: 2.5rem; height: 2.5rem; -webkit-animation: spin 5s infinite; animation: spin 5s infinite; } .second { left: 2.5rem; width: 5rem; height: 5rem; -webkit-animation: spin-reverse 5s infinite; animation: spin-reverse 5s infinite; } .third { top: 2.8125rem; left: -0.625rem; width: 3.75rem; height: 3.75rem; } @-webkit-keyframes spin { 50% { transform: rotate(360deg); } } @keyframes spin { 50% { transform: rotate(360deg); } } @-webkit-keyframes spin-reverse { 50% { transform: rotate(-360deg); } } @keyframes spin-reverse { 50% { transform: rotate(-360deg); } } .lil-circle { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white; width: 6.25rem; height: 6.25rem; opacity: 0.65; } .blur-circle { position: absolute; top: -1.1875rem; left: -1.1875rem; } } .text { color: lightgray; font-size: 1.125rem; font-family: 'Open Sans', sans-serif; text-align: center; padding-top: 3rem; } } </style>

Ignore Space Show notes View

src/components/global.vue

<template>
  <div>
    
    <div v-if="DYZshow " class="dyzTip">
      <div class="curtain"></div>
      <div v-if="true||cite.code == '20240326-066184'" class="content">
        <img alt="" src="../assets/printing.png"/>
        <div v-for="(task,tIdx) in DYZlist" :key="tIdx" class="taskBox">
          <div class="text1">{{ `NO.${tIdx+1}文档打印机总进度` }}</div>
          <div class="progressContainer">
            <div class="progressBar" :style="{width: `${((DYZlistNum-DYZlist.length)/DYZlistNum)*100}%`}"></div>
          </div>
          <div class="fileBox">
            <div class="file">
              <div class="text2">
                任务
                <span v-for="(item,index) in DYZlist2" :key="index" :style="Progress.taskCode==item.code?'':'display:none;'">{{index+1}}</span>
                {{`/${DYZlistNum}: ${DYZlist[0].sourceFileName}`}}
              </div>
              <div class="text3">{{downloaded}}</div>
              <div v-if="djsM.total<1" class="JDT" style="width: 100%;"><span :style="'width:' + '80%'"></span></div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-else class="content">
        <img alt="" src="../assets/printing.png"/>
        <img alt="" src="../assets/printing.png"/>
        <div v-if="ztyc" class="flex-center" style="padding: 0 0.3rem; margin: 0">
          小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。
        </div>
        
        <div v-else class="name">正在打印...</div>
        
        
        
        
        <div v-if="djsM.total<1" class="JDT"><span :style="'width:' + Progress.rate"></span></div>
        <div v-else class="JDT"><span :style="'width:' + djsM.rate"></span></div>

<div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div>
      </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="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="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="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 mqtt from 'mqtt/dist/mqtt'
import {getAdvertisement, getDeviceByCode, getTransactionStatus} from '@/api/resultApi'
import VueQr from 'vue-qr'
import {bdGetPrintOrderPush, bdGetTransactionStatus, getDeviceCode, getDownLoad} from '@/api/bdResultApi'
import alert from '../utils/alert'

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

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

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

src: '',
      zfShow: false,

DYZlist: [
        // {
        //   "taskCode": "20241127181155592951-0",
        //   "taskStatus": "INTERRUPT",
        //   "code": "20241127181155592951",
        //   "status": null,
        //   "interruptReason": null,
        //   "complete": 0,
        //   "expectedTime": 6,
        //   "fileSize": 0.0,
        //   "readSize": 0.0,
        //   "sourceFileName": "温馨提示.docx",
        //   "order": 1,
        //   "taskCount": 1
        // },
        // {
        //   "taskCode": "20241127181155592951-0",
        //   "taskStatus": "INTERRUPT",
        //   "code": "20241127181155592951",
        //   "status": null,
        //   "interruptReason": null,
        //   "complete": 0,
        //   "expectedTime": 6,
        //   "fileSize": 0.0,
        //   "readSize": 0.0,
        //   "sourceFileName": "温馨提示.docx",
        //   "order": 1,
        //   "taskCount": 1
        // },
      ],
      DYZlist2: [],
      DYZlistNum: 1,
      downloaded:'',
      Progress: {
        rate: '0%'
      },
      djsM: {
        num: 0,
        total: 0,
        rate: '0%'
      },
      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)
            }
          })
          getDownLoad().then(res => {
            console.log('res:???',res);
            this.downloaded = res;
          }).catch(error => {
            alert(error, this)
          })
        }, 1000)
      }
    },
    toLoad() {
      this.cite.code = '20240326-066184'
      // this.cite.code = 'TZLC001'
      this.code = this.cite.code
      this.load()
      this.cite.loadingSta = {
        sta: false
      }

getDownLoad().then(res => {
        console.log('res:???',res);
        this.downloaded = res;
      }).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)
      }
    },
    // 加时间进度条
    addTime() {
      setTimeout(() => {
        if (this.djsM.total > this.djsM.num) {
          this.djsM.num = this.djsM.num + 1
          this.djsM.rate = (this.djsM.num / this.djsM.total) * 100 + '%'
          this.addTime()
        }
      }, 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 => {
        console.log('正在重连')
        if (error) {
          console.log('正在重连', error)
        }
      })
      //连接失败提醒
      this.client.on('error', error => {
        console.log('连接失败')
        if (error) {
          console.log('连接失败', error)
        }
        setTimeout(() => {
          console.log('尝试重新连接')
          this.client.connect();
        }, 5000); // 5秒后尝试重新连接
      })
      //接收消息
      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) {
            // this.cite.serveError = true
            this.cite.serveError = false
          } else {
            this.cite.serveError = false
          }
        } else if (data.cmd == 'ORDER_INFO' || data.cmd == 'START_ORDER') {
          //小程序支付
          if (this.DYZshow) {
            return
          }
          this.DYZshow = true
          this.play()
          this.zfShow = false
          this.DYZlist = data.printTaskPushList
          this.DYZlist2 = data.printTaskPushList
          this.DYZlistNum = this.DYZlist.length

let timeN = 0
          data.printTaskPushList.forEach(item => {
            if (item.time) {
              timeN = timeN + parseFloat(item.time)
            }
          })
          this.djsM = {
            num: 0,
            total: timeN,
            rate: '0%'
          }
          console.log('进度条', this.djsM)
          if (timeN > 0) {
            this.addTime()
          }
          // 提示语音

// 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)
          // 判断弹框是否显示
          if (!this.DYZshow) {
            this.orderPush()
          }
          this.Progress = data
          if (data.rate == '99%') {
            setTimeout(() => {
              if (this.Progress.rate == '99%') {
                this.Progress.rate = '100%'
              }
            }, 1500)
          }
        }
      })
    },
    orderPush() {
      bdGetPrintOrderPush().then(data => {
        console.log('bdGetPrintOrderPush', data)
        if (data.code) {
          this.DYZshow = true
          this.play()
          this.zfShow = false
          this.DYZlist = data.printTaskPushList
          this.DYZlist2 = data.printTaskPushList
          this.DYZlistNum = this.DYZlist.length
          // 提示语音

// 3秒查询订单状态
          this.ddcx(data.code)
          // 订单状态，进度查询
          this.ddycztcx(data.code)
        }
      })
    },
    //订阅多个主题
    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>

.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;
      overflow: hidden;

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

.taskBox{
      text-align: left;
      margin: unset;
      .progressContainer {
        width: 100%;
        height: 30px;
        background-color: #EBEBEB ; /* 背景颜色 */
        border-radius: 5px; /* 圆角 */
        overflow: hidden; /* 隐藏溢出部分 */
        margin: unset; /* 外边距 */
      }

.progressBar {
        height: 100%; /* 高度 */
        background: repeating-linear-gradient(
          130deg, /* 斜线角度 */
          #ffcc00, /* 黄色 */
          #ffcc00 10px, /* 黄色条纹宽度 */
          #ff9900 10px, /* 橙色开始位置 */
          #ff9900 20px /* 橙色条纹宽度 */
        );
        width: 70%; /* 进度条的宽度，可以根据需要调整 */
        transition: width 0.5s 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;
    }
  }
}

.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"/>
        <div v-if="ztyc" class="flex-center" style="padding: 0 0.3rem; margin: 0">
          小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。
        </div>
        
        <div v-else class="name">正在打印...</div>
        
        
        
        
        <div v-if="djsM.total<1" class="JDT"><span :style="'width:' + Progress.rate"></span></div>
        <div v-else class="JDT"><span :style="'width:' + djsM.rate"></span></div>

<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 mqtt from 'mqtt/dist/mqtt'
import {getAdvertisement, getDeviceByCode, getTransactionStatus} from '@/api/resultApi'
import VueQr from 'vue-qr'
import {bdGetPrintOrderPush, 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: {
        rate: '0%'
      },
      djsM: {
        num: 0,
        total: 0,
        rate: '0%'
      },
      numZt: 120,
      ztyc: false,

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

if (this.code == '') {
        this.toLoad()
      }
    }, 3000)
  },
  methods: {
    onCloneZt() {
      this.numZt = 0
      this.onNum()
    },
    onNum() {
      if (this.numZt == 0) {
        this.cite.ztyc = false
        this.DYZshow = false
        this.DYZlist = []
        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.addTime()
      // 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)
      }
    },
    // 加时间进度条
    addTime() {
      setTimeout(() => {
        if (this.djsM.total > this.djsM.num) {
          this.djsM.num = this.djsM.num + 1
          this.djsM.rate = (this.djsM.num / this.djsM.total) * 100 + '%'
          this.addTime()
        }
      }, 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 => {
        console.log('正在重连')
        if (error) {
          console.log('正在重连', error)
        }
      })
      //连接失败提醒
      this.client.on('error', error => {
        console.log('连接失败')
        if (error) {
          console.log('连接失败', error)
        }
        setTimeout(() => {
          console.log('尝试重新连接')
          this.client.connect();
        }, 5000); // 5秒后尝试重新连接
      })
      //接收消息
      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) {
            // this.cite.serveError = true
            this.cite.serveError = false
          } else {
            this.cite.serveError = false
          }
        } else if (data.cmd == 'ORDER_INFO' || data.cmd == 'START_ORDER') {
          //小程序支付
          if (this.DYZshow) {
            return
          }
          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
          // }

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

.JDT {
      width: 80%;
      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: 1s ease-in-out;
      }
    }
  }