<template>
<div>
<!-- 打印中提示-->
<div v-if="(DYZshow && DYZlist)" class="dyzTip">
<div class="curtain"></div>
<div v-if="cite.code == '20240430-940955'" 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 class="taskBox">
<div class="text1">{{ `NO.1文档打印机总进度` }}</div>
<div class="progressContainer">
<div class="progressBar" :style="{ width: `${(lastPrintList.length/printBackList.length)*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> -->
{{ `${currentPrint+1}/${printBackList.length}: ${lastPrintList[lastPrintList.length]?.sourceFileName||''}`}}
</div>
<div class="text3">{{ downLoadMessage||'' }}</div>
<div class="JDT" style="width: 100%;">
<!-- <span :style="'width:' + progressPercentage +'%'"></span> -->
<span v-show="progressType=='real'" :style="'width:' + progressPercentage +'%'"></span>
<span v-show="progressType=='fake'" style="width:100%;background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, red 100%);"></span>
</div>
</div>
</div>
</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, deviceAndOrder, printOrderList } from '@/api/bdResultApi'
import alert from '../utils/alert'
export default {
name: 'global',
components: {
VueQr
},
data() {
return {
isOnLine:false,
intervalTask:null,
currentTaskCode:null,
currentPrint:null,
taskCode:null,
progressInterval:null,
progressPercentage:0,
progressType:'real',
downLoadMessage:'',
printBackList:[],
lastPrintList:[],
client: null,
code: '',
DYZshow: false, // 是否显示打印中
downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\',
state: {
name: '',
sta: false
},
src: '',
zfShow: false,
DYZlist: [],
DYZlist2: [],
DYZlistNum: 1,
Progress: {
rate: '0%'
},
djsM: {
num: 0,
total: 0,
rate: '0%'
},
numZt: 120,
ztyc: false,
citeL: {
loadingSta: {
sta: false,
name: 'Loading'
}
},
mgcData: {
show: false,
re: '尊敬的用户您好，打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容，打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情，系统审核通过即分配取件码。凭借取件码，可以稍后在任意一台打印服务终端上通过'
}
}
},
created() {
console.log(this.cite.ztyc)
this.cite.loadingSta = {
sta: true,
name: '页面重启中，请稍后'
}
this.toLoad()
setInterval(() => {
if (this.cite != this.citeL) {
this.citeL = this.cite
}
if (this.code == '') {
this.toLoad()
}
}, 3000)
},
mounted() {
console.log('开始定时任务???');
},
methods: {
getDeviceAndOrder() {
let that = this;
deviceAndOrder().then(res => {
let {deviceStatus,hasOrder,taskCode,currentTask,downLoadMessage} = res;
if (hasOrder){// 先判断是否有订单进来
if (taskCode) {
if (taskCode == this.taskCode) {//非新任务
if (currentTask) {
console.log('progressPercentage???', this.progressPercentage);
let completeItem = that.printBackList[that.currentPrint];
if (currentTask == that.currentTaskCode) {//非新的打印文件
// if (deviceStatus == "RUN") {
// this.progressType='real'
// } else {
// this.progressType='fake'
// }
} else {//新的打印文件
that.currentTaskCode = currentTask;
that.currentPrint = Number(currentTask.slice(-1));
that.lastPrintList = [...that.lastPrintList, completeItem];
that.startProgress(completeItem?.expectedTime || 3);
}
}
} else {//获取新任务的数据并显示打印框
that.getPrintList(taskCode);
that.DYZshow = true;
}
}
}else{// 没有订单不显示打印框
that.DYZshow = false;
}
that.isOnLine = deviceStatus;
that.cite.deviceStatus = deviceStatus;
that.downLoadMessage = downLoadMessage;
}).catch(error => {
alert(error, that)
})
},
getPrintList() {
printOrderList().then(res => {
let {printBackList,code} = res;
console.log('getPrintList????',res);
if (code!=this.taskCode) {
this.taskCode = code;
printBackList.map((item)=>{item.complete=false});
this.printBackList = printBackList;
this.lastPrintList = [];
this.DYZshow = true;
console.log('printBackList????',printBackList);
}
}).catch(error => {
alert(error, this)
})
},
startProgress(duration) {
console.log('duration???',duration);
duration = duration*1000; // 转换成毫秒
let interval = duration / 100; // 每增加1%所需的毫秒数
this.progressPercentage = 0;
this.progressInterval = setInterval(() => {
if (this.progressPercentage >= 100) {
clearInterval(this.progressInterval); // 完成时清除定时器
this.progressType='fake'
this.progressPercentage = 0;
}else{
this.progressType='real'
this.progressPercentage += 1;
}
}, interval);
},
onCloneZt() {
this.numZt = 0
this.onNum()
},
onNum() {
if (this.numZt == 0) {
this.cite.ztyc = false
this.DYZshow = false
this.DYZlist = []
this.mgcData = {
show: false,
re: ''
}
} else {
this.numZt = this.numZt - 1
setTimeout(() => {
this.onNum()
}, 1000)
}
this.ztyc = this.cite.ztyc
},
onChange(name, val) {
this[name] = val
},
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 = '20240430-940955';//'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(() => {
this.getDeviceAndOrder();
if (!this.state.sta && this.cite.state.sta) {
let time = 3000
if (this.cite.state.name2) {
time = 6000
}
setTimeout(() => {
this.cite.state.sta = false
}, time)
}
this.state = this.cite.state
}, 2000)
}
},
// 加时间进度条
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: 100%;
margin: 1rem auto 0;
height: 1rem;
border-radius: 1rem;
position: relative;
border: 1px solid #323232;
overflow: hidden;
span {
position: absolute;
background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
top: 0;
left: 0;
bottom: 0;
transition: width 0.5s ease;
}
}
.taskBox {
text-align: left;
margin: unset;
.progressContainer {
width: 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>
