<template>
<div>
<!-- 打印中提示-->
<div v-if="(DYZshow && DYZlist)" class="dyzTip">
<div class="curtain"></div>
<div class="content">
<img alt="" src="../assets/printing.png"/>
<p v-if="orderInfo.downTimeSecond>300" class="dlTip flex-center">目前网络断开，尝试重连已超时({{
orderInfo.downTimeSecond
}}S)，系统将
<en>自动终结此次打印</en>
</p>
<p v-else-if="orderInfo.downTimeSecond>120" class="dlTip flex-center">目前网络断开，尝试重连超时({{
orderInfo.downTimeSecond
}}S)，可以继续等待或即刻 <span class="flex-center" @click="stopProgram()">终止打印</span></p>
<p v-else-if="!orderInfo.netStatus&&citeL.zxPage" class="dlTip flex-center">
目前网络断开，尝试重连超时({{ orderInfo.downTimeSecond || 0 }}S)</p>
<div v-if="ztyc" style="margin: 1rem;text-align: left;">
<div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;">
<p>订单编号 {{ orderInfo.taskCode }}</p>
<p>时间 {{ ycTime }}</p>
</div>
<div class="flex-between" style="font-size: 1rem;margin: 0;line-height: 1.6rem;flex-wrap: wrap;">
<p>异常原因 {{ orderInfo.abnormalReason }}</p>
</div>
<div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;">
用户您好，抱歉地通知您：系统检测到打印遇到了异常问题，正在打印中的订单和排队即将处理的订单，都将转变为取件码再次自助打印的订单（取件码可通过小程序【我的】\打印记录-预约记录找到），您可以稍后等机器恢复正常后使用取件码重新打印文件。
</div>
<div style="font-size: 1rem;margin: 0;line-height: 1.6rem;text-indent: 2em;">
您也可以通过小程序首页的更多服务-微信客服，联系客服人员进行问题沟通和跟进处理。
</div>
</div>
<div v-else class="taskBox">
<div class="text1">{{ `NO.1文档打印机总进度` }}</div>
<div class="progressContainer">
<div :style="{ width: `${(lastPrintList.length/printBackList.length)*100}%`}" class="progressBar"></div>
</div>
<div class="fileBox">
<div class="file">
<div class="text2">
任务
{{
`${currentPrint + 1}/${printBackList.length}: ${lastPrintList[lastPrintList.length]?.sourceFileName || ''}`
}}
{{ orderInfo.currentTaskFileName }}
</div>
<div class="text3">{{ downLoadMessage || '' }}</div>
<div class="JDT">
<span v-show="progressType=='real'&&progressPercentage=='100'" :style="'width:0'"></span>
<span v-show="progressType=='real'&&progressPercentage!='100'" :style="'width:' + progressPercentage +'%'"></span>
<span v-show="progressType=='fake'" :style="'width: 100%'"></span>
</div>
</div>
</div>
</div>
<div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div>
</div>
</div>
<!-- 敏感词提示-->
<div v-if="mgcData.show" class="dyzTip flex-center">
<div class="curtain"></div>
<div class="content" style="margin-top: 0;top: 20%;height: auto;">
<div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem;">{{ mgcData.re }}</div>
<div class="btn flex-center" style="margin: 2rem auto;" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div>
</div>
</div>
<!-- 关机确认提示 -->
<div v-if="confirmDia" class="dyzTip flex-center">
<div class="curtain"></div>
<div class="content" style="margin-top: 0;top: 20%;height: auto; padding: 1rem 0 2.5rem;">
<div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem; padding-bottom: 1rem;">
请问是否确认即刻重启机器恢复服务？
</div>
<div style="display: flex; justify-content: center;">
<div class="btn flex-center" style="margin: 0; width: 12rem; margin-right: 2rem;" @click="onJqztDo">立即重启</div>
<div class="btn flex-center" style="margin: 0; width: 12rem;" @click="confirmDia = false">取消</div>
</div>
</div>
</div>
<!-- 重启恢复服务-->
<div v-if="citeL.cqjqSta" class="dyzTip flex-center">
<div class="curtain"></div>
<div class="content3 flex-between">
<div class="box box1">
<img alt="" class="onClose" src="../assets/close.png" @click="onJqzt(0)">
<div class="tit flex-start">输入设备基础维护码授权重启操作</div>
<div class="myInput flex-center"><input v-model="qjmData" disabled placeholder="请输入维护码授权重启操作" type="text">
</div>
<div class="tip flex-start">提醒:该操作适用于在打印遇到问题时，复位重启机器以恢复正常打 印服务，请确认是否继续该操作?</div>
<div class="btn flex-center" @click="onJqzt(1)">马上重启恢复服务</div>
</div>
<div class="box box2 flex-between">
<div v-for="item in numL" :key="item" class="li flex-center" @click="onImport(item)">{{ item }}</div>
</div>
</div>
</div>
<!-- 小程序支付-->
<div v-if="zfShow" class="dyzTip">
<div class="curtain"></div>
<div class="content content2">
<VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0"
:logoScale="0.2" :margin="0" :size="300" :text="src" logoBackgroundColor="white"></VueQr>
<p>
<img alt="" class="icon" src="../assets/demo10.png" @click="onChange('zfShow', false)"/>
</p>
</div>
</div>
<!-- 提示-->
<div v-if="state.sta" class="tkTip flex-center">
<div v-if="state.name">{{ state.name }}</div>
<div v-if="state.name2" style="width: 50%;margin-top: 3%;">{{ state.name2 }}</div>
</div>
<!-- 页面加载中-->
<div v-if="citeL.loadingSta.sta" class="dyzTip">
<div class="curtain"></div>
<div class="loadingDH">
<!-- 绘制齿轮 -->
<div class="load">
<div class="gear first">
<svg id="purple" fill="#afb4db" viewbox="0 0 100 100">
<path
d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z">
</path>
</svg>
</div>
<div class="gear second">
<svg id="pink" fill="#FFB5C5" viewbox="0 0 100 100">
<path
d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z">
</path>
</svg>
</div>
<div class="gear third">
<svg id="orange" fill="#fedcbd" viewbox="0 0 100 100">
<path
d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z">
</path>
</svg>
</div>
<!-- 绘制圆形水珠 -->
<div class="lil-circle"></div>
<svg class="blur-circle">
<filter id="blur">
<fegaussianblur in="SourceGraphic" stddeviation="13"></fegaussianblur>
</filter>
<circle cx="70" cy="70" fill="transparent" filter="url(#blur)" r="66" stroke="white" stroke-width="40">
</circle>
</svg>
</div>
<!-- 文字 -->
<div class="text">{{ citeL.loadingSta.name }}</div>
</div>
</div>
<audio ref="audio" class="aud">
<source src="../assets/audio/Wait4Printing.mp3"/>
</audio>
</div>
</template>
<script>
import {getAdvertisement, getDeviceByCode, getEnterKey} from '@/api/resultApi'
import VueQr from 'vue-qr'
import {getDeviceCode, bdGetDeviceAndOrder, printOrderList, bdSocket, bdStop} from '@/api/bdResultApi'
import alert from '../utils/alert'
import {bdStopProgram} from "../api/bdResultApi";
export default {
name: 'global',
components: {
VueQr
},
data() {
return {
isOnLine: false,
intervalTask: null,
currentTaskCode: null,
currentPrint: null,
taskCode: null,
progressInterval: null,
progressPercentage: 0,
progressType: 'real',
downLoadMessage: '',
printBackList: [],
lastPrintList: [],
client: null,
code: '',
DYZshow: false, // 是否显示打印中
downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\',
state: {
name: '',
sta: false
},
src: '',
zfShow: false,
DYZlist: [],
DYZlist2: [],
DYZlistNum: 1,
Progress: {
rate: '0%'
},
djsM: {
num: 0,
total: 0,
rate: '0%'
},
numZt: 120,
ztyc: false,
citeL: {
loadingSta: {
sta: false,
name: 'Loading'
}
},
mgcData: {
show: false,
re: '尊敬的用户您好，打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容，打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情，系统审核通过即分配取件码。凭借取件码，可以稍后在任意一台打印服务终端上通过'
},
orderInfo: '',
ycTime: '',
numL: [1, 2, 3, 4, 5, 6, 7, 8, 9, '清除', '0', '删除'],
qjmData: '',
csSTA: true,
confirmDia: false,
}
},
created() {
console.log(this.cite.ztyc)
this.cite.loadingSta = {
sta: true,
name: '页面重启中，请稍后'
}
this.toLoad()
setInterval(() => {
if (this.cite != this.citeL) {
this.citeL = this.cite
}
if (this.code == '') {
this.toLoad()
}
}, 3000)
},
mounted() {
console.log('开始定时任务???');
},
methods: {
stopProgram() {
bdStopProgram().then(() => {
})
},
onImport(num) {
let _this = this
if (num === '清除') {
_this.qjmData = ''
return
} else if (num === '删除') {
_this.qjmData = _this.qjmData.slice(0, _this.qjmData.length - 1)
return
} else if (_this.qjmData.length > 20) {
return
}
_this.qjmData = _this.qjmData + num
},
onTip(name, time) {
let _this = this
_this.state.sta = true
_this.state.name = name
setTimeout(() => {
_this.state.sta = false
}, time)
},
onJqzt(num) {
console.log('onJqzt', num)
if (num === 0) {
this.citeL.cqjqSta = false
} else if (num === 1) {
let {qjmData} = this
if (this.state.sta) {
return;
}
if (!qjmData) {
this.onTip('请输入维护码授权重启操作！', 3000)
return
}
getEnterKey({keys: qjmData}).then(res => {
if (res) {
this.qjmData = ''
this.citeL.cqjqSta = false
this.confirmDia = true
} else {
this.onTip('维护码不正确的，请重新确认！', 3000)
}
})
}
},
onJqztDo() {
this.confirmDia = false
bdStop().then(() => {
this.onTip('重启命令已发出', 3000)
})
},
add(t) {
if (t < 10) {
return '0' + t
}
return t
},
format() {
let that = this
let date = new Date();
let o = {
"y": date.getFullYear(), //年
"M": that.add(date.getMonth() + 1), //月份
"d": that.add(date.getDate()), //日
"h": that.add(date.getHours()), //小时
"m": that.add(date.getMinutes()), //分
};
return o.y + '/' + o.M + '/' + o.d + ' ' + o.h + ':' + o.m
},
getDeviceAndOrder() {
let that = this;
bdGetDeviceAndOrder().then(res => {
let {deviceStatus, hasOrder, taskCode, currentTask, downLoadMessage, downTimeSecond, time} = res;
if (hasOrder) {// 先判断是否有订单进来
if (downTimeSecond > 310 && that.csSTA) {
that.csSTA = false
that.stopProgram()
} else {
that.csSTA = true
}
if (deviceStatus == 'ABNORMAL') {
if (!that.cite.ztyc) {
that.ycTime = this.format()
that.numZt = 120
that.onNum()
}
that.cite.ztyc = true
} else if (taskCode) {
if (taskCode == that.taskCode) {//非新任务
if (currentTask) {
// console.log('progressPercentage???', that.progressPercentage);
let completeItem = that.printBackList[that.currentPrint];
if (currentTask == that.currentTaskCode) {//非新的打印文件
// if (deviceStatus == "RUN") {
// this.progressType='real'
// } else {
// this.progressType='fake'
// }
} else {//新的打印文件
if(that.progressPercentage>0&&that.progressPercentage!=100) {
that.progressPercentage = 100
}else{
that.currentTaskCode = currentTask;
that.currentPrint = Number(currentTask.slice(-1));
that.lastPrintList = [...that.lastPrintList, completeItem];
if(time>0) {
that.startProgress(time);
}
}
}
}
} else {//获取新任务的数据并显示打印框
that.getPrintList(taskCode);
that.DYZshow = true;
}
}
} else {// 没有订单不显示打印框
if (that.progressPercentage < 100) {
that.progressType = 'fake';
that.progressPercentage = 100
} else {
that.progressType = 'real';
that.DYZshow = false;
that.cite.ztyc = false;
that.lastPrintList = [];
}
}
that.isOnLine = deviceStatus;
that.cite.deviceStatus = deviceStatus;
that.downLoadMessage = downLoadMessage;
that.orderInfo = res
that.cite.orderInfoTop = res
}).catch(error => {
alert(error, that)
})
bdSocket().then(res => {
let {content, idCard, mgc, refreshAD, scan, udisk, complete} = res
if (idCard) {
// 跳转到身份证打印
this.cite.modeName = '身份证打印'
that.$router.push({
name: 'operationGuide',
params: {
name: '身份证打印'
}
})
} else if (refreshAD) {
// 立即刷新广告
this.getAdvertisement()
} else if (scan) {
// 跳转到扫描打印
this.cite.modeName = '扫描打印'
this.$router.push({
name: 'operationGuide',
params: {
name: '扫描打印'
}
})
} else if (udisk) {
// 跳转到U盘打印
this.cite.modeName = 'U盘打印'
this.$router.push({
name: 'operationGuide',
params: {
name: 'U盘打印'
}
})
} else if (mgc) {
// 是否敏感词
this.mgcData = {
show: true,
re: content
}
this.numZt = 30
this.onNum()
} else if (complete) {
this.$router.push({
name: 'complete'
})
}
}).catch(error => {
console.log(error)
})
},
getPrintList() {
printOrderList().then(res => {
let {printBackList, code} = res;
// console.log('getPrintList????', res);
if (code != this.taskCode) {
this.taskCode = code;
printBackList.map((item) => {
item.complete = false
});
this.printBackList = printBackList;
this.lastPrintList = [];
this.DYZshow = true;
console.log('printBackList????', printBackList);
}
}).catch(error => {
alert(error, this)
})
},
startProgress(duration) {
console.log('duration???', duration);
duration = duration * 1000; // 转换成毫秒
let interval = duration / 100; // 每增加1%所需的毫秒数
this.progressPercentage = 0;
this.progressInterval = setInterval(() => {
if (this.progressPercentage >= 100) {
this.progressType = 'fake'
this.progressPercentage = 0;
clearInterval(this.progressInterval); // 完成时清除定时器
} else {
this.progressType = 'real'
this.progressPercentage += 1;
}
}, interval);
},
onCloneZt() {
this.numZt = 0
this.onNum()
},
onNum() {
if (this.numZt == 0) {
this.cite.ztyc = false
this.DYZshow = false
this.DYZlist = []
this.mgcData = {
show: false,
re: ''
}
} else {
this.numZt = this.numZt - 1
setTimeout(() => {
this.onNum()
}, 1000)
}
this.ztyc = this.cite.ztyc
},
onChange(name, val) {
this[name] = val
},
toLoad() {
// this.cite.code = '20240326-066184'; //'20240430-940955';//
// this.cite.code = 'TZLC001'
// this.code = this.cite.code
// this.load()
// this.cite.loadingSta = {
// sta: false
// }
// this.mgcData = {
// show: true,
// re: '铭感次提示'
// }
// this.numZt = 30
// this.onNum()
// this.DYZshow = true
if (this.code) {
return
}
getDeviceCode().then(res => {
if (this.code == '') {
this.cite.code = res.data
this.code = res.data
this.load()
} else {
this.cite.code = res.data
this.code = res.data
}
this.cite.zxPage = this.cite.onChange(this.code)
this.cite.loadingSta = {
sta: false
}
}).catch(error => {
alert(error, this)
})
},
load() {
if (this.cite.facility === '') {
this.getDeviceByCode()
}
// 判断是否是广告屏
if (this.cite.name != 'advertising') {
// this.initMqtt()
setInterval(() => {
this.getDeviceAndOrder();
if (!this.state.sta && this.cite.state.sta) {
let time = 3000
if (this.cite.state.name2) {
time = 6000
}
setTimeout(() => {
this.cite.state.sta = false
}, time)
}
this.state = this.cite.state
}, 1000)
}
},
//获取设备信息
getDeviceByCode() {
if (this.code) {
getDeviceByCode({code: this.code}).then(res => {
console.log(res);
this.cite.facility = res
this.getAdvertisement()
}).catch(error => {
alert(error, this)
})
}
},
// 获取广告链接
getAdvertisement() {
let name = 'DeviceScreen'
if (this.cite.name == 'advertising') {
name = 'AdvertisingScreen'
}
getAdvertisement({deviceId: this.cite.facility.id, screen: name}).then(res => {
// console.log(res)
this.cite.advertisement = res || ''
}).catch(error => {
alert(error, this)
})
},
play() {
console.log(this.$refs.audio)
this.$refs.audio.play()
}
}
}
</script>
<style lang="less" scoped>
.dyzTip {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
.curtain {
background: #000;
width: 100%;
height: 100%;
opacity: 0.3;
}
.content {
position: absolute;
left: 50%;
margin-left: -19rem;
top: 50%;
margin-top: -14.5rem;
width: 38.56rem;
// height: 29rem;
background: #ffffff;
border-radius: 1.25rem;
overflow: hidden;
img {
width: 100%;
}
div {
font-size: 1.38rem;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #323232;
line-height: 1.88rem;
margin-top: 1.3rem;
}
.name {
font-size: 1rem;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #323232;
line-height: 1.38rem;
text-align: left;
padding: 0 3rem;
}
.btn {
width: 18rem;
height: 3rem;
margin: 1rem auto;
color: #fff;
background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
border-radius: 1rem;
}
.btn2 {
margin: 0;
width: 14rem;
}
.JDT {
width: 100%;
margin: 1rem auto 0;
height: 1rem;
border-radius: 1rem;
position: relative;
border: 1px solid #323232;
overflow: hidden;
span {
position: absolute;
background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
top: 0;
left: 0;
bottom: 0;
transition: width 0.5s ease;
}
}
.taskBox {
text-align: left;
margin: unset;
.progressContainer {
width: 96%;
height: 16px;
background-color: #EBEBEB;
border-radius: 10px;
overflow: hidden;
margin: 0 auto;
}
.progressBar {
height: 100%;
/* 高度 */
background: repeating-linear-gradient(130deg,
/* 斜线角度 */ #1DC98F,
/* 黄色 */ #1DC98F 10px,
/* 黄色条纹宽度 */ #2CD89E 10px,
/* 橙色开始位置 */ #2CD89E 20px
/* 橙色条纹宽度 */);
width: 0;
/* 进度条的宽度，可以根据需要调整 */
transition: width 2s ease;
/* 平滑过渡效果 */
margin: unset;
}
.fileBox {
width: 100%;
padding: 20px 30px;
box-sizing: border-box;
margin: unset;
}
}
.text1 {
font-weight: bold;
font-size: 20px;
color: #333333;
margin: 10px;
}
.text2 {
font-weight: bold;
font-size: 18px;
color: #333333;
margin: 10px 0;
}
.text3 {
font-weight: bold;
font-size: 14px;
color: #666666;
margin: 10px 0;
}
}
.content2 {
background: transparent;
height: auto;
img {
width: 18rem;
}
.icon {
width: 3rem;
margin-top: 3rem;
}
}
.content3 {
position: absolute;
left: 50%;
top: 50%;
height: 29.375rem;
width: 55rem;
margin-top: -14.6875rem;
margin-left: -27.5rem;
align-items: flex-end;
.box {
background: #FFFFFF;
border-radius: 1.25rem;
text-align: left;
position: relative;
.tit {
font-weight: bold;
font-size: 1.25rem;
color: #333333;
line-height: 1.25rem;
border-left: 0.125rem solid #56A599;
padding-left: 0.625rem;
}
.myInput {
padding: 0 0.9375rem;
height: 3.125rem;
background: #FFFFFF;
border-radius: 0.3125rem;
border: 0.0625rem solid #EAEDEC;
margin: 1.875rem 0;
input {
width: 100%;
height: 100%;
border: 0;
background: none;
font-weight: 500;
font-size: 1.125rem;
line-height: 1.125rem;
}
}
.tip {
border-top: 0.0625rem solid #E8E8E8;
padding: 1.875rem 0 4.375rem;
font-weight: 500;
font-size: 1.125rem;
color: #FF0000;
line-height: 1.5rem;
}
.btn {
background: linear-gradient(-90deg, #52A39D 0%, #A1C553 100%);
width: 100%;
height: 3.125rem;
border-radius: 0.625rem;
font-weight: bold;
font-size: 1.5rem;
color: #FFFFFF;
line-height: 1.5rem;
}
.li {
width: 3.625rem;
height: 3.625rem;
background: #F7F7F9;
border-radius: 0.625rem;
font-weight: bold;
font-size: 1.5rem;
color: #333333;
line-height: 1.125rem;
margin-bottom: 1.25rem;
cursor: pointer;
}
.onClose {
position: absolute;
width: 28px;
top: 20px;
right: 20px;
}
}
.box1 {
width: 33.125rem;
height: 25.625rem;
padding: 3.75rem 2.1875rem 0;
}
.box2 {
width: 13.125rem;
flex-wrap: wrap;
padding: 1.25rem 1.875rem 0;
}
}
.dlTip {
position: absolute;
left: 20px;
right: 20px;
margin-top: -60px;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 17px;
color: #333333;
line-height: 20px;
height: 41px;
background: rgba(255, 255, 255, 80%);
border-radius: 10px;
span {
height: 30px;
background: #FA1D1D;
border-radius: 15px;
padding: 0 10px;
margin-left: 16px;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 10px;
}
en {
color: #FF0000;
}
}
}
.tkTip {
position: fixed;
top: 5%;
width: 100%;
z-index: 99;
div {
background: rgba(51, 51, 51, 0.5);
color: #fff;
padding: 1rem 2rem;
border-radius: 1rem;
}
}
.loadingDH {
position: absolute;
top: 30%;
width: 100%;
.load {
position: relative;
margin: 3.125rem auto;
width: 6.25rem;
height: 5rem;
.gear {
position: absolute;
z-index: -10;
width: 2.5rem;
height: 2.5rem;
-webkit-animation: spin 5s infinite;
animation: spin 5s infinite;
}
.second {
left: 2.5rem;
width: 5rem;
height: 5rem;
-webkit-animation: spin-reverse 5s infinite;
animation: spin-reverse 5s infinite;
}
.third {
top: 2.8125rem;
left: -0.625rem;
width: 3.75rem;
height: 3.75rem;
}
@-webkit-keyframes spin {
50% {
transform: rotate(360deg);
}
}
@keyframes spin {
50% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin-reverse {
50% {
transform: rotate(-360deg);
}
}
@keyframes spin-reverse {
50% {
transform: rotate(-360deg);
}
}
.lil-circle {
position: absolute;
border-radius: 50%;
box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white;
width: 6.25rem;
height: 6.25rem;
opacity: 0.65;
}
.blur-circle {
position: absolute;
top: -1.1875rem;
left: -1.1875rem;
}
}
.text {
color: lightgray;
font-size: 1.125rem;
font-family: 'Open Sans', sans-serif;
text-align: center;
padding-top: 3rem;
}
}
</style>
