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