修改竖屏

hanfei / VueSharedPrinting

Browse code 修改竖屏 master
1 parent 6914b2d commit f9a5879995c11ed153d7471102214ed530072b96 linda authored on 1 Feb 2024

Patch

Showing 11 changed files

Ignore Space Show notes View src/App.vue
<template> <div id="app"> <top /> <global /> <router-view /> </div> </template> <script> import top from '@/components/top.vue' import global from '@/components/global' export default { name: 'Home', components: { top, global }, mounted() { // console.log('触发跳转') // this.load() window.addEventListener( 'touchstart', function (event) { event.preventDefault() }, false ) }, methods: { load() { if (this.$route.name == 'device' && this.cite.memberLoginVo == '') { this.cite.tlTime.djs = this.cite.tlTime.mrT } else { if (this.cite.tlTime.djs < 1) { this.quit() } else { this.cite.tlTime.djs = this.cite.tlTime.djs - 1 } } // setTimeout(()=>{ // this.load() // // console.log(this.cite.tlTime,this.cite,this.$route.name) // },1000) } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } * { margin: 0; padding: 0; } body { background: #fafafa; } .flex-center { display: flex; flex-direction: row; align-items: center; justify-content: center; } .flex-start { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .flex-end { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } .flex-between { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } </style> <template> <div id="app"> <top/> <global/> <router-view/> </div> </template> <script> import top from '@/components/top.vue' import global from "@/components/global"; export default { name: 'Home', components: { top,global }, mounted() { // console.log('触发跳转') // this.load() window.addEventListener('touchstart', function(event) {event.preventDefault();}, false); }, methods: { load() { if(this.$route.name=='device'&&this.cite.memberLoginVo=='') { this.cite.tlTime.djs = this.cite.tlTime.mrT }else{ if(this.cite.tlTime.djs<1) { this.quit() }else{ this.cite.tlTime.djs = this.cite.tlTime.djs-1 } } // setTimeout(()=>{ // this.load() // // console.log(this.cite.tlTime,this.cite,this.$route.name) // },1000) }, }, } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } * { margin: 0; padding: 0; } body { background: #FAFAFA; } .flex-center{ display:flex; flex-direction: row; align-items:center; justify-content:center; } .flex-start{ display:flex; flex-direction: row; align-items:center; justify-content:flex-start; } .flex-end{ display:flex; flex-direction: row; align-items:center; justify-content:flex-end; } .flex-between{ display:flex; flex-direction: row; align-items:center; justify-content:space-between; } </style>

Ignore Space Show notes View

src/App.vue

export default {
  name: 'Home',
  components: {
    top,
    global
  },
  mounted() {
    // console.log('触发跳转')
    // this.load()
    window.addEventListener(
      'touchstart',
      function (event) {
        event.preventDefault()
      },
      false
    )
  },
  methods: {
    load() {
      if (this.$route.name == 'device' && this.cite.memberLoginVo == '') {
        this.cite.tlTime.djs = this.cite.tlTime.mrT
      } else {
        if (this.cite.tlTime.djs < 1) {
          this.quit()
        } else {
          this.cite.tlTime.djs = this.cite.tlTime.djs - 1
        }
      }
      // setTimeout(()=>{
      //   this.load()
      //   // console.log(this.cite.tlTime,this.cite,this.$route.name)
      // },1000)
    }
  }
}
</script>

* {
  margin: 0;
  padding: 0;
}
body {
  background: #fafafa;
}
.flex-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.flex-start {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.flex-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.flex-between {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>

export default {
  name: 'Home',
  components: {
    top,global
  },
  mounted() {
    // console.log('触发跳转')
    // this.load()
    window.addEventListener('touchstart', function(event) {event.preventDefault();}, false);
  },
  methods: {
    load() {
      if(this.$route.name=='device'&&this.cite.memberLoginVo=='') {
        this.cite.tlTime.djs = this.cite.tlTime.mrT
      }else{
        if(this.cite.tlTime.djs<1) {
          this.quit()
        }else{
          this.cite.tlTime.djs = this.cite.tlTime.djs-1
        }
      }
      // setTimeout(()=>{
      //   this.load()
      //   // console.log(this.cite.tlTime,this.cite,this.$route.name)
      // },1000)
    },
  },
}
</script>

* {
  margin: 0;
  padding: 0;
}
body {
  background: #FAFAFA;
}
.flex-center{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:center;
}
.flex-start{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:flex-start;
}
.flex-end{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:flex-end;
}
.flex-between{
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content:space-between;
}
</style>

Ignore Space Show notes View src/components/global.vue
<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> </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() { this.cite.loadingSta = { sta: true, name: '页面重启中，请稍后' } this.toLoad() setInterval(() => { if (this.cite != this.citeL) { this.citeL = this.cite } if (this.code == '') { this.toLoad() } }, 500) }, 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: '', //不填默认随机生成一个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 } } else if (data.cmd == 'ORDER_INFO') { //小程序支付 this.DYZshow = true 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 \|\| '' }) } } } </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> <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 .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=".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> </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() { this.cite.loadingSta = { sta: true, name: '页面重启中，请稍后' } this.toLoad() setInterval(() => { if (this.cite != this.citeL) { this.citeL = this.cite } if(this.code=='') { this.toLoad() } }, 500) }, 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() 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: '', //不填默认随机生成一个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 } }else if(data.cmd=='ORDER_INFO') { //小程序支付 this.DYZshow = true 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 \|\| '' }) }, } } </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: .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>

Ignore Space Show notes View

src/components/global.vue

<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">正在打印...</div>
        
        
        
        
        <div class="JDT"><span :style="'width:' + Progress.rate"></span></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>
  </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() {
    this.cite.loadingSta = {
      sta: true,
      name: '页面重启中，请稍后'
    }
    this.toLoad()

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

if (this.code == '') {
        this.toLoad()
      }
    }, 500)
  },
  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: '', //不填默认随机生成一个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
          }
        } else if (data.cmd == 'ORDER_INFO') {
          //小程序支付
          this.DYZshow = true
          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 || ''
      })
    }
  }
}
</script>

.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 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 .3rem;margin: 0;">小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。</div>

        <div v-else class="name">正在打印...</div>
        



        <div class="JDT"><span :style="'width:'+Progress.rate"></span></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=".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>
  </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() {
    this.cite.loadingSta = {
      sta: true,
      name: '页面重启中，请稍后'
    }
    this.toLoad()

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

if(this.code=='') {
        this.toLoad()
      }
    }, 500)
  },
  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()
      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: '', //不填默认随机生成一个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
          }
        }else if(data.cmd=='ORDER_INFO') {
          //小程序支付
          this.DYZshow = true
          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 || ''
      })
    },
  }
}
</script>

.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/nav.vue
<template> <div class="nav flex-between"> <div class="back flex-center" @click="_goHome()"> <img src="../assets/demo10.png" alt="" /> 返回上一页 </div> <div :class="['name', 'flex-center', { 'vertical-title-margin': isVertical }]">{{ title }}</div> <div class="type" v-if="type">【{{ type }}】</div> </div> </template> <script> export default { name: 'nav', inject: ['title', 'type'], data() { return { isVertical: false } }, methods: { _goHome() { window.history.back() // this.quit() // this.$router.push({ // name: 'device' // }) } }, created() { this.isVertical = this.cite.isVertical } } </script> <style scoped lang="less"> .nav { height: 10.88rem; padding: 0 5.56rem 0 2.06rem; position: relative; font-size: 34px; font-weight: bold; color: #323232; line-height: 48px; .back { width: 21.88rem; height: 6.44rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; img { width: 2.65rem; margin-right: 1.25rem; } } .name { position: absolute; height: 100%; font-size: 3.5rem; font-weight: 400; color: #323232; line-height: 3.69rem; left: 50%; width: 30rem; margin-left: -15rem; } } .vertical-title-margin { margin-left: -11rem !important; font-size: 2.5rem !important; } </style> <template> <div class="nav flex-between"> <div class="back flex-center" @click="_goHome()"> <img src="../assets/demo10.png" alt=""> 返回上一页 </div> <div class="name flex-center">{{ title }}</div> <div class="type" v-if="type">【{{ type }}】</div> </div> </template> <script> export default { name: "nav", inject: ['title','type'], methods: { _goHome() { window.history.back() // this.quit() // this.$router.push({ // name: 'device' // }) } } } </script> <style scoped lang="less"> .nav { height: 10.88rem; padding: 0 5.56rem 0 2.06rem; position: relative; font-size: 34px; font-weight: bold; color: #323232; line-height: 48px; .back { width: 21.88rem; height: 6.44rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; cursor: pointer; img { width: 2.65rem; margin-right: 1.25rem; } } .name { position: absolute; height: 100%; font-size: 3.5rem; font-weight: 400; color: #323232; line-height: 3.69rem; left: 50%; width: 30rem; margin-left: -15rem; } } </style>

Ignore Space Show notes View

src/components/nav.vue

<template>
  <div class="nav flex-between">
    <div class="back flex-center" @click="_goHome()">
      <img src="../assets/demo10.png" alt="" />
      返回上一页
    </div>
    <div :class="['name', 'flex-center', { 'vertical-title-margin': isVertical }]">{{ title }}</div>
    <div class="type" v-if="type">【{{ type }}】</div>
  </div>
</template>

<template>
  <div class="nav flex-between">
    <div class="back flex-center" @click="_goHome()">
      <img src="../assets/demo10.png" alt="">
      返回上一页
    </div>
    <div class="name flex-center">{{ title }}</div>
    <div class="type" v-if="type">【{{ type }}】</div>
  </div>
</template>

Ignore Space Show notes View src/utils/cite.js
// 引用地址 let inWebURL = 'ws://127.0.0.1:7000/' let baseURL = 'http://127.0.0.1' // let baseURL = "http://192.168.250.110"; // 刘竞 // let baseURL = "http://192.168.250.29"; // 家亮 // 记录首页名称 let name = '' // 设备编号 let code = '' // 用户信息 let memberLoginVo = '' // 设备信息 let facility = '' // 选中的文件 let selectedFile = [] // 选中的文件数 let fileNum = 0 // 打印的参数 let parameter = '' // 订单id let orderId = '' // 广告位 let advertisement = '' // 页面停留时间(秒) let tlTime = { djs: 5 * 60, //倒计时时间 mrT: 5 * 60 //默认时间 } let url = '' // 打印方式名称 let modeName = '' // 提示的内容及状态 let state = { name: '', sta: false } // 打印数据 let printData = '' //异常提醒状态 let ztyc = false // loading提醒 let loadingSta = { sta: false, name: 'Loading' } // 判断是否是竖屏默认不是 let isVertical = false export default { loadingSta, ztyc, printData, state, modeName, url, inWebURL, baseURL, facility, selectedFile, fileNum, parameter, orderId, code, memberLoginVo, name, advertisement, tlTime, isVertical } // 引用地址 let inWebURL = "ws://127.0.0.1:7000/"; let baseURL = "http://127.0.0.1"; // let baseURL = "http://192.168.250.110"; // 刘竞 // let baseURL = "http://192.168.250.29"; // 家亮 // 记录首页名称 let name = "" // 设备编号 let code = "" // 用户信息 let memberLoginVo = '' // 设备信息 let facility = ""; // 选中的文件 let selectedFile = []; // 选中的文件数 let fileNum = 0 // 打印的参数 let parameter = '' // 订单id let orderId = '' // 广告位 let advertisement = '' // 页面停留时间(秒) let tlTime = { djs: 560,//倒计时时间 mrT: 560,//默认时间 } let url = '' // 打印方式名称 let modeName = '' // 提示的内容及状态 let state = { name: '', sta: false } // 打印数据 let printData = '' //异常提醒状态 let ztyc = false // loading提醒 let loadingSta = { sta: false, name: 'Loading' } export default { loadingSta, ztyc, printData, state, modeName, url, inWebURL, baseURL, facility, selectedFile, fileNum, parameter, orderId, code, memberLoginVo, name, advertisement, tlTime };

Ignore Space Show notes View

src/utils/cite.js

Ignore Space Show notes View src/views/argument.vue
<template> <!-- 参数设定--> <div class="transcoding"> <navbar :name="name" /> <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]"> <div :class="['left', { 'vertical-box-left': isVertical }]"> <div class="title">温馨提示</div> <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div> <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div> </div> <div :class="['right', { 'vertical-box-right': isVertical }]"> <!-- <div class="flex-between name">{{ pageData.name }}</div> --> <div class="flex-between"> <div>纸张规格</div> <div>{{ pageData.specification }}</div> </div> <div class="flex-between"> <div>颜色</div> <div class="only flex-center"> <!-- <div :class="['only', 'flex-center', { 'vertical-box-row': isVertical }]"> --> <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div> <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div> </div> </div> <div class="flex-between" v-show="name != '身份证打印'"> <div>单双面</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div> <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div> </div> </div> <div class="flex-between"> <div>份数</div> <div :class="['import', 'flex-center', { 'vertical-box-row': isVertical }]"> <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" /> <input :value="pageData.copies" type="number" min="1" disabled /> <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" /> </div> </div> <div class="btn flex-center" @click="skip('pay', name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: 'argument', components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, pageData: { name: '文件名称……文件名称.doc', //文件名称 specification: 'A4', //纸张规格 printingColor: 'BW', //颜色 printingFaces: 'SINGLE', //单双面 copies: 1, //份数 isVertical: false } } }, methods: { skip(href, name) { let { pageData } = this this.cite.parameter = pageData this.$router.push({ name: href, params: { name: name } }) }, onChange(name, val) { this.pageData[name] = val }, variable(num) { this.pageData.copies = num } }, created() { this.isVertical = this.cite.isVertical }, mounted() { // console.log('打印文件',this.cite.selectedFile) this.cite.fileNum = this.cite.selectedFile.length } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; text-indent: 2em; } } .right { display: flex; flex-direction: column; justify-content: center; width: 53.19rem; .css1(); padding: 0 4.81rem; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 3.75rem; .name { margin-top: 3.19rem; } .only { width: 17.25rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; overflow: hidden; div { width: 50%; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2.63rem; height: 100%; cursor: pointer; } .act { background: #61aa8f; color: #ffffff; } } .import { img { width: 2.75rem; height: 2.75rem; cursor: pointer; } } input { width: 6.38rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; margin: 0 0.94rem; } .optionBox { select { width: 13.69rem; height: 3.19rem; padding-right: 3.56rem; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url('../assets/demo16.png') no-repeat scroll right center transparent; background-position-x: 11rem; } select::-ms-expand { display: none; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; margin-top: 2.25rem; cursor: pointer; } } } .vertical-box { height: 90rem; flex-direction: column; justify-content: space-between; } .vertical-box-left { height: 40% !important; } .vertical-box-right { height: 50% !important; } .vertical-box-row { flex-direction: row; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } </style> <template> <!-- 参数设定--> <div class="transcoding"> <navbar :name="name" /> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div> <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div> </div> <div class="right"> <!-- <div class="flex-between name">{{ pageData.name }}</div> --> <div class="flex-between"> <div>纸张规格</div> <div>{{ pageData.specification }}</div> </div> <div class="flex-between"> <div>颜色</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div> <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div> </div> </div> <div class="flex-between" v-show="name!='身份证打印'"> <div>单双面</div> <div class="only flex-center"> <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div> <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div> </div> </div> <div class="flex-between"> <div>份数</div> <div class="import flex-center"> <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" /> <input :value="pageData.copies" type="number" min="1" disabled/> <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" /> </div> </div> <div class="btn flex-center" @click="skip('pay', name)">下一步</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' export default { name: 'argument', components: { navbar }, provide() { return { title: '', type: this.name } }, data() { return { name: this.cite.modeName, pageData: { name: '文件名称……文件名称.doc', //文件名称 specification: 'A4', //纸张规格 printingColor: 'BW', //颜色 printingFaces: 'SINGLE', //单双面 copies: 1, //份数 } } }, methods: { skip(href, name) { let {pageData} = this this.cite.parameter = pageData this.$router.push({ name: href, params: { name: name } }) }, onChange(name, val) { this.pageData[name] = val }, variable(num) { this.pageData.copies = num } }, mounted() { // console.log('打印文件',this.cite.selectedFile) this.cite.fileNum = this.cite.selectedFile.length } } </script> <style scoped lang="less"> .box { height: 42.13rem; .css1 { height: 100%; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; } .left { width: 46.44rem; margin-right: 1.88rem; .css1(); .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; padding: 4.13rem 0 2.44rem; } .content { width: 37rem; font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 0 auto; text-align: left; text-indent: 2em; } } .right { display: flex; flex-direction: column; justify-content: center; width: 53.19rem; .css1(); padding: 0 4.81rem; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 3.75rem; .name { margin-top: 3.19rem; } .only { width: 17.25rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; overflow: hidden; div { width: 50%; font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2.63rem; height: 100%; cursor: pointer; } .act { background: #61aa8f; color: #ffffff; } } .import { img { width: 2.75rem; height: 2.75rem; cursor: pointer; } } input { width: 6.38rem; height: 3.19rem; background: #ffffff; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; margin: 0 0.94rem; } .optionBox { select { width: 13.69rem; height: 3.19rem; padding-right: 3.56rem; border-radius: 0.63rem; border: 0.06rem solid #707070; font-size: 1.88rem; font-weight: 400; color: #323232; text-align: center; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url('../assets/demo16.png') no-repeat scroll right center transparent; background-position-x: 11rem; } select::-ms-expand { display: none; } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; margin-top: 2.25rem; cursor: pointer; } } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } </style>

Ignore Space Show notes View

src/views/argument.vue

<template>
  
  <div class="transcoding">
    <navbar :name="name" />
    <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]">
      <div :class="['left', { 'vertical-box-left': isVertical }]">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div :class="['right', { 'vertical-box-right': isVertical }]">
        
        <div class="flex-between">
          <div>纸张规格</div>
          <div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            
            <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div>
            <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div>
          </div>
        </div>
        <div class="flex-between" v-show="name != '身份证打印'">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div>
            <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div :class="['import', 'flex-center', { 'vertical-box-row': isVertical }]">
            <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" />
            <input :value="pageData.copies" type="number" min="1" disabled />
            <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" />
          </div>
        </div>
        <div class="btn flex-center" @click="skip('pay', name)">下一步</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'argument',
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      pageData: {
        name: '文件名称……文件名称.doc', //文件名称
        specification: 'A4', //纸张规格
        printingColor: 'BW', //颜色
        printingFaces: 'SINGLE', //单双面
        copies: 1, //份数
        isVertical: false
      }
    }
  },
  methods: {
    skip(href, name) {
      let { pageData } = this
      this.cite.parameter = pageData

this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name, val) {
      this.pageData[name] = val
    },
    variable(num) {
      this.pageData.copies = num
    }
  },
  created() {
    this.isVertical = this.cite.isVertical
  },
  mounted() {
    // console.log('打印文件',this.cite.selectedFile)
    this.cite.fileNum = this.cite.selectedFile.length
  }
}
</script>

.css1 {
    height: 100%;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
  }

.left {
    width: 46.44rem;
    margin-right: 1.88rem;
    .css1();

.title {
      font-size: 2.88rem;
      font-weight: bold;
      color: #d41212;
      line-height: 4.06rem;
      padding: 4.13rem 0 2.44rem;
    }

.content {
      width: 37rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3rem;
      margin: 0 auto;
      text-align: left;
      text-indent: 2em;
    }
  }

.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 53.19rem;
    .css1();
    padding: 0 4.81rem;
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 3.75rem;

.name {
      margin-top: 3.19rem;
    }

.only {
      width: 17.25rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      overflow: hidden;

div {
        width: 50%;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        line-height: 2.63rem;
        height: 100%;
        cursor: pointer;
      }

.act {
        background: #61aa8f;
        color: #ffffff;
      }
    }

.import {
      img {
        width: 2.75rem;
        height: 2.75rem;
        cursor: pointer;
      }
    }

input {
      width: 6.38rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      font-size: 1.88rem;
      font-weight: 400;
      color: #323232;
      text-align: center;
      margin: 0 0.94rem;
    }

.optionBox {
      select {
        width: 13.69rem;
        height: 3.19rem;
        padding-right: 3.56rem;
        border-radius: 0.63rem;
        border: 0.06rem solid #707070;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        text-align: center;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: url('../assets/demo16.png') no-repeat scroll right center transparent;
        background-position-x: 11rem;
      }

select::-ms-expand {
        display: none;
      }
    }

.btn {
      width: 100%;
      height: 5.5rem;
      background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
      border-radius: 1.25rem;
      font-size: 1.88rem;
      font-weight: 400;
      color: #ffffff;
      line-height: 2.63rem;
      margin-top: 2.25rem;
      cursor: pointer;
    }
  }
}
.vertical-box {
  height: 90rem;
  flex-direction: column;
  justify-content: space-between;
}
.vertical-box-left {
  height: 40% !important;
}
.vertical-box-right {
  height: 50% !important;
}
.vertical-box-row {
  flex-direction: row;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>

<template>
  
  <div class="transcoding">
    <navbar :name="name" />
    <div class="box flex-center">
      <div class="left">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div class="right">
        
        <div class="flex-between">
          <div>纸张规格</div>
          <div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div>
            <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div>
          </div>
        </div>
        <div class="flex-between" v-show="name!='身份证打印'">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div>
            <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" />
            <input :value="pageData.copies" type="number" min="1" disabled/>
            <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" />
          </div>
        </div>
        <div class="btn flex-center" @click="skip('pay', name)">下一步</div>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'argument',
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      pageData: {
        name: '文件名称……文件名称.doc', //文件名称
        specification: 'A4', //纸张规格
        printingColor: 'BW', //颜色
        printingFaces: 'SINGLE', //单双面
        copies: 1, //份数
      }
    }
  },
  methods: {
    skip(href, name) {
      let {pageData} = this
      this.cite.parameter = pageData

this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name, val) {
      this.pageData[name] = val
    },
    variable(num) {
      this.pageData.copies = num
    }
  },
  mounted() {
    // console.log('打印文件',this.cite.selectedFile)
    this.cite.fileNum = this.cite.selectedFile.length
  }
}
</script>

.css1 {
    height: 100%;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
  }

.left {
    width: 46.44rem;
    margin-right: 1.88rem;
    .css1();

.title {
      font-size: 2.88rem;
      font-weight: bold;
      color: #d41212;
      line-height: 4.06rem;
      padding: 4.13rem 0 2.44rem;
    }

.name {
      margin-top: 3.19rem;
    }

.only {
      width: 17.25rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      overflow: hidden;

div {
        width: 50%;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        line-height: 2.63rem;
        height: 100%;
        cursor: pointer;
      }

.act {
        background: #61aa8f;
        color: #ffffff;
      }
    }

.import {
      img {
        width: 2.75rem;
        height: 2.75rem;
        cursor: pointer;
      }
    }

select::-ms-expand {
        display: none;
      }
    }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>

Ignore Space Show notes View src/views/complete.vue
<template> <!--打印完成--> <div class="complete"> <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]"> <div :class="['left', { 'vertical-margin-right': isVertical }]"> <img src="../assets/complete.png" alt="" /> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt="" /> <span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> </div> </template> <script> export default { name: 'complete', data() { return { num: 0, isVertical: false } }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.num = 0 this.load() }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, methods: { skip(href) { this.cite.fileNum = 0 this.$router.push({ name: href }) }, load() { let n = this.num if (n == -1) { return } else if (n < 10) { this.num = n + 1 setTimeout(() => { this.load() }, 1000) } else { // this.quit() // console.log('我触发的？complete',n) this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } } } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .vertical-box { height: 90rem !important; width: 90%; justify-content: space-around; flex-direction: column; } .vertical-margin-right { margin-right: 0 !important; } </style> <template> <!--打印完成--> <div class="complete"> <div class="box flex-center"> <div class="left"> <img src="../assets/complete.png" alt=""> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt=""><span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> </div> </template> <script> export default { name: "complete", data() { return { num: 0 } }, mounted() { this.num=0 this.load() }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, methods: { skip(href) { this.cite.fileNum = 0 this.$router.push({ name: href }) }, load() { let n = this.num if(n==-1) { return }else if(n<10) { this.num = n+1 setTimeout(()=>{ this.load() },1000) }else{ // this.quit() // console.log('我触发的？complete',n) this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } }, } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #FFFFFF; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0,0,0,0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #D41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52A39D 0%, #A1C553 50%, #81D012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #FFFFFF; line-height: 2.63rem; cursor: pointer; } } </style>

Ignore Space Show notes View

src/views/complete.vue

<template>
  
  <div class="complete">
    <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]">
      <div :class="['left', { 'vertical-margin-right': isVertical }]">
        <img src="../assets/complete.png" alt="" />
        <div>打印完成</div>
        <div>感谢您使用天章自助打印服务</div>
      </div>
      <div class="right">
        <div class="title flex-center">温馨提示</div>
        <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div>
        <div class="tip" v-show="false">
          <div>本次打印您将获得：</div>
          <div class="flex-center">
            <img src="../assets/points.png" alt="" />
            <span>28积分</span>
          </div>
        </div>
        <div class="btn flex-center" @click="skip('device')">回到首页</div>
      </div>
    </div>
  </div>
</template>

<template>

  <div class="complete">
    <div class="box flex-center">
      <div class="left">
        <img src="../assets/complete.png" alt="">
        <div>打印完成</div>
        <div>感谢您使用天章自助打印服务</div>
      </div>
      <div class="right">
        <div class="title flex-center">温馨提示</div>
        <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div>
        <div class="tip" v-show="false">
          <div>本次打印您将获得：</div>
          <div class="flex-center">
            <img src="../assets/points.png" alt=""><span>28积分</span>
          </div>
        </div>
        <div class="btn flex-center" @click="skip('device')">回到首页</div>
      </div>
    </div>
  </div>
</template>

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div v-if="false" class="left"> <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill" /> </div> </div> <div :class="['left', { 'vertical-width': isVertical }]"> <!-- <div class="zzc"></div> --> <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType == 'image/jpeg'" class="advertising flex-center"> <img :src="item.previewPath" model="scaleToFill" /> </div> <div v-else-if="item.fileType == 'image/png'" class="advertising flex-center"> <img :src="item.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising flex-center"> <video v-if="index == swIndex" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata" :src="item.previewPath" autoplay muted style="width: 100%; height: 100%" ></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png" /> 联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png" /> 价格查询 </div> </div> </div> <div :class="['right', { 'vertical-width': isVertical }]" v-if="!isVertical"> <div class="main4 flex-center"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <!-- 竖版 --> <div :class="['right', 'vertical-bottom', { 'vertical-width': isVertical }]" v-if="isVertical"> <div class="main4 flex-center vertical-width50"> <div style="display: flex; flex-direction: column; align-items: center"> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <!-- <div class="feature"> --> <div class="main icon2 flex-start vertical-width50" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start vertical-width50" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> <!-- </div> --> </div> <div class="dbTip flex-between"> <div>机器编号：{{ cite.code }}</div> <div>客服电话：{{ facility.servicePhone }}</div> </div> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { name: 'device', components: { VueQr }, data() { return { swIndex: 0, mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '', isVertical: false } }, methods: { skip(href, name) { let { facility } = this let { sta, name2 } = '' facility.paperNumber.forEach(item => { if (item.name.indexOf('A4') != -1) { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } // if (this.cite.memberLoginVo == '') { // this.cite.state = { // name: '请扫码登录设备再操作！', // sta: true // } // return // } if (href == 'operationGuide') { this.cite.modeName = name } this.$router.push({ name: href, params: { name: name } }) }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT(T) { let _this = this this.mySwiper = new this.Swiper('.swiper-container', { // allowSlidePrev: false, // allowSlideNext: false, // 改变swiper样式时，自动初始化swiper observer: true, // 监测swiper父元素，如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: T, disableOnInteraction: false }, pagination: { el: '.swiper-pagination' }, on: { slideChangeTransitionEnd: function () { // console.log(this.realIndex); _this.swIndex = this.realIndex if (_this.advertisement[this.realIndex].fileType == 'video/mp4') { _this.bannerLoop(false) } } } }) }, bannerLoop(sta, n) { let _this = this if (sta) { _this.mySwiper.slideTo(n) _this.mySwiper.autoplay.start() } else { _this.mySwiper.autoplay.stop() } }, onPause() { let n = this.swIndex + 1 if (n == this.advertisement.length) { n = 1 } this.bannerLoop(true, n) }, onTimeupdate() { // console.log(123,e) }, // 正在加载中 loadEdmetadata() { // console.log(456,e) } }, created() {}, mounted() { this.load() if (window.outerWidth === 1080) { this.cite.isVertical = true this.isVertical = true } else { this.cite.isVertical = false this.isVertical = false } setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT(this.advertisement[0].intervalTime * 1000) }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code // console.log(this.appSrc) } }, 300) } } </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; position: relative; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } .zzc { position: absolute; width: 100%; height: 100%; z-index: 99; left: 0; right: 0; } } .right { width: 22rem; } } .main { width: 100%; height: 8rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } .vertical-width-direction { width: 100%; flex-direction: column; } .vertical-width { width: 100% !important; } .vertical-width50 { width: 48% !important; height: 25rem !important; justify-content: center; font-size: 2.5rem !important; } .vertical-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; } </style> <template> <div class="device"> <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]"> <div v-if="false" class="left"> <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div> <div v-else class="advertising flex-center"> <img :src="advertisement[0].previewPath" model="scaleToFill" /> </div> </div> <div :class="['left', { 'vertical-width': isVertical }]"> <div class="zzc"></div> <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType == 'image/jpeg'" class="advertising flex-center"> <img :src="item.previewPath" model="scaleToFill" /> </div> <div v-else-if="item.fileType == 'image/png'" class="advertising flex-center"> <img :src="item.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising flex-center"> <video v-if="index == swIndex" @pause="onPause" @timeupdate="onTimeupdate" @loadedmetadata="loadEdmetadata" :src="item.previewPath" autoplay muted style="width: 100%; height: 100%" ></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> <div v-if="false" class="left"> <!-- 广告--> <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div> <!-- 图片--> <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center"> <img :src="advertisement.previewPath" model="scaleToFill" /> </div> <!-- 视频--> <div v-else class="advertising icon1 flex-center"> <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video> </div> <div v-show="false" class="box2 flex-between"> <div class="main2 flex-center" @click="skip('explain', '联系客服')"> <img src="../assets/demo7.png" /> 联系客服 </div> <div class="main2 flex-center" @click="skip('explain', '价格查询')"> <img src="../assets/demo5.png" /> 价格查询 </div> </div> </div> <div :class="['right', { 'vertical-width': isVertical }]" v-if="!isVertical"> <div class="main4 flex-center"> <div> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <div class="feature"> <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> </div> </div> <!-- 竖版 --> <div :class="['right', 'vertical-bottom', { 'vertical-width': isVertical }]" v-if="isVertical"> <div class="main4 flex-center vertical-width50"> <div style="display: flex; flex-direction: column; align-items: center"> <!-- <div class="flex-center ewm" v-if="memberLoginVo!=''">--> <!-- <div class="zzc flex-center"></div>--> <!-- <VueQr :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"--> <!-- :logoMargin="0"--> <!-- :logoScale=".2" :margin="0" :size="300" :text="''" logoBackgroundColor="white">--> <!-- </VueQr>--> <!-- </div>--> <div class="flex-center ewm"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white" ></VueQr> </div> <div class="flex-center tip"> <img src="../assets/demo9.png" /> 扫码打印手机文件 </div> </div> </div> <!-- 功能--> <!-- <div class="feature"> --> <div class="main icon2 flex-start vertical-width50" @click="skip('operationGuide', 'U盘打印')"> <img src="../assets/demo2.png" /> <div>U盘打印</div> </div> <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')"> <img src="../assets/demo3.png" /> <div>扫描打印</div> </div> <div class="main icon4 flex-start vertical-width50" @click="skip('operationGuide', '身份证打印')"> <img src="../assets/demo4.png" /> <div>身份证打印</div> </div> <!-- </div> --> </div> <div class="dbTip flex-between"> <div>机器编号：{{ cite.code }}</div> <div>客服电话：{{ facility.servicePhone }}</div> </div> </div> </div> </template> <script> import VueQr from 'vue-qr' export default { name: 'device', components: { VueQr }, data() { return { swIndex: 0, mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '', isVertical: false } }, methods: { skip(href, name) { let { facility } = this let { sta, name2 } = '' facility.paperNumber.forEach(item => { if (item.name.indexOf('A4') != -1) { if (item.residue < 1) { name2 = '请联系管理员添加' + item.name sta = true } } }) if (sta == true) { this.cite.state = { name: name2, sta: true } return } // if (this.cite.memberLoginVo == '') { // this.cite.state = { // name: '请扫码登录设备再操作！', // sta: true // } // return // } if (href == 'operationGuide') { this.cite.modeName = name } this.$router.push({ name: href, params: { name: name } }) }, load() { if (this.src == '') { this.src = this.cite.url setTimeout(() => { this.load() }, 1000) } }, GGT(T) { let _this = this this.mySwiper = new this.Swiper('.swiper-container', { // allowSlidePrev: false, // allowSlideNext: false, // 改变swiper样式时，自动初始化swiper observer: true, // 监测swiper父元素，如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: T, disableOnInteraction: false }, pagination: { el: '.swiper-pagination' }, on: { slideChangeTransitionEnd: function () { // console.log(this.realIndex); _this.swIndex = this.realIndex if (_this.advertisement[this.realIndex].fileType == 'video/mp4') { _this.bannerLoop(false) } } } }) }, bannerLoop(sta, n) { let _this = this if (sta) { _this.mySwiper.slideTo(n) _this.mySwiper.autoplay.start() } else { _this.mySwiper.autoplay.stop() } }, onPause() { let n = this.swIndex + 1 if (n == this.advertisement.length) { n = 1 } this.bannerLoop(true, n) }, onTimeupdate() { // console.log(123,e) }, // 正在加载中 loadEdmetadata() { // console.log(456,e) } }, mounted() { console.log(window.outerHeight) if (window.outerWidth === 1080) { this.isVertical = true } else { this.isVertical = false } this.load() setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT(this.advertisement[0].intervalTime * 1000) }, 500) } if (this.cite.facility != this.facility) { this.facility = this.cite.facility } if (this.cite.memberLoginVo != this.memberLoginVo) { this.memberLoginVo = this.cite.memberLoginVo } if (this.appSrc == '' && this.cite.code != '') { this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code // console.log(this.appSrc) } }, 300) } } </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; position: relative; .left { width: 92.5rem; margin: 0; position: relative; z-index: 1; .advertising { width: 100%; height: 52rem; border-radius: 1.63rem; //margin-bottom: 1.88rem; cursor: pointer; overflow: hidden; font-size: 8rem; font-weight: 400; color: #ffffff; line-height: 8rem; img { width: 100%; height: 100%; } } .zzc { position: absolute; width: 100%; height: 100%; z-index: 99; left: 0; right: 0; } } .right { width: 22rem; } } .main { width: 100%; height: 8rem; border-radius: 1.63rem; font-size: 1.8rem; font-weight: 400; color: #ffffff; line-height: 1.8rem; margin-top: 1rem; img { width: 8rem; margin-top: -1rem; } } .icon1 { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45); } .icon2 { background: linear-gradient(180deg, #f2c952 0%, #db572b 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57); } .icon3 { background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3); } .icon4 { background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%); box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42); } .css1 { background: #ffffff; box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; cursor: pointer; } .main2 { width: 100%; height: 6.44rem; .css1(); font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2.63rem; img { width: 3.75rem; margin-right: 0.38rem; } } .main3 { width: 100%; height: 9.94rem; .css1(); font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; img { width: 4.25rem; margin-right: 0.88rem; } } .main4 { width: 100%; height: 25rem; .css1(); font-size: 1.88rem; font-weight: 400; color: #323232; line-height: 2rem; .ewm { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; position: relative; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } .zzc { position: absolute; background: #333; opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } .vertical-width-direction { width: 100%; flex-direction: column; } .vertical-width { width: 100% !important; } .vertical-width50 { width: 48% !important; height: 25rem !important; justify-content: center; font-size: 2.5rem !important; } .vertical-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; } </style>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]">
      <div v-if="false" class="left">
        <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div>
        <div v-else class="advertising flex-center">
          <img :src="advertisement[0].previewPath" model="scaleToFill" />
        </div>
      </div>
      <div :class="['left', { 'vertical-width': isVertical }]">
        
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide">
              
              <div v-if="item.fileType == 'image/jpeg'" class="advertising flex-center">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              <div v-else-if="item.fileType == 'image/png'" class="advertising flex-center">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              
              <div v-else class="advertising flex-center">
                <video
                  v-if="index == swIndex"
                  @pause="onPause"
                  @timeupdate="onTimeupdate"
                  @loadedmetadata="loadEdmetadata"
                  :src="item.previewPath"
                  autoplay
                  muted
                  style="width: 100%; height: 100%"
                ></video>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div v-if="false" class="left">
        
        <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div>
        
        <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center">
          <img :src="advertisement.previewPath" model="scaleToFill" />
        </div>
        
        <div v-else class="advertising icon1 flex-center">
          <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video>
        </div>

<div v-show="false" class="box2 flex-between">
          <div class="main2 flex-center" @click="skip('explain', '联系客服')">
            <img src="../assets/demo7.png" />
            联系客服
          </div>
          <div class="main2 flex-center" @click="skip('explain', '价格查询')">
            <img src="../assets/demo5.png" />
            价格查询
          </div>
        </div>
      </div>
      <div :class="['right', { 'vertical-width': isVertical }]" v-if="!isVertical">
        <div class="main4 flex-center">
          <div>
            
            
            
            
            
            
            
            <div class="flex-center ewm">
              <VueQr
                v-if="appSrc"
                :auto-color="true"
                :dot-scale="1"
                :logo-src="require('@/assets/logo.png')"
                :logoMargin="0"
                :logoScale="0.2"
                :margin="0"
                :size="300"
                :text="appSrc"
                logoBackgroundColor="white"
              ></VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png" />
              扫码打印手机文件
            </div>
          </div>
        </div>

<div class="feature">
          <div class="main icon2 flex-start" @click="skip('operationGuide', 'U盘打印')">
            <img src="../assets/demo2.png" />
            <div>U盘打印</div>
          </div>
          <div class="main icon3 flex-start" @click="skip('operationGuide', '扫描打印')">
            <img src="../assets/demo3.png" />
            <div>扫描打印</div>
          </div>
          <div class="main icon4 flex-start" @click="skip('operationGuide', '身份证打印')">
            <img src="../assets/demo4.png" />
            <div>身份证打印</div>
          </div>
        </div>
      </div>
      
      <div :class="['right', 'vertical-bottom', { 'vertical-width': isVertical }]" v-if="isVertical">
        <div class="main4 flex-center vertical-width50">
          <div style="display: flex; flex-direction: column; align-items: center">
            
            
            
            
            
            
            
            <div class="flex-center ewm">
              <VueQr
                v-if="appSrc"
                :auto-color="true"
                :dot-scale="1"
                :logo-src="require('@/assets/logo.png')"
                :logoMargin="0"
                :logoScale="0.2"
                :margin="0"
                :size="300"
                :text="appSrc"
                logoBackgroundColor="white"
              ></VueQr>
            </div>
            <div class="flex-center tip">
              <img src="../assets/demo9.png" />
              扫码打印手机文件
            </div>
          </div>
        </div>

<div class="main icon2 flex-start vertical-width50" @click="skip('operationGuide', 'U盘打印')">
          <img src="../assets/demo2.png" />
          <div>U盘打印</div>
        </div>
        <div class="main icon3 flex-start vertical-width50" @click="skip('operationGuide', '扫描打印')">
          <img src="../assets/demo3.png" />
          <div>扫描打印</div>
        </div>
        <div class="main icon4 flex-start vertical-width50" @click="skip('operationGuide', '身份证打印')">
          <img src="../assets/demo4.png" />
          <div>身份证打印</div>
        </div>
        
      </div>
      <div class="dbTip flex-between">
        <div>机器编号：{{ cite.code }}</div>
        <div>客服电话：{{ facility.servicePhone }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'

export default {
  name: 'device',
  components: {
    VueQr
  },
  data() {
    return {
      swIndex: 0,
      mySwiper: '',
      appSrc: '',
      memberLoginVo: '',
      advertisement: '',
      facility: '',
      src: '',
      isVertical: false
    }
  },
  methods: {
    skip(href, name) {
      let { facility } = this
      let { sta, name2 } = ''
      facility.paperNumber.forEach(item => {
        if (item.name.indexOf('A4') != -1) {
          if (item.residue < 1) {
            name2 = '请联系管理员添加' + item.name
            sta = true
          }
        }
      })
      if (sta == true) {
        this.cite.state = {
          name: name2,
          sta: true
        }
        return
      }
      // if (this.cite.memberLoginVo == '') {
      //   this.cite.state = {
      //     name: '请扫码登录设备再操作！',
      //     sta: true
      //   }
      //   return
      // }
      if (href == 'operationGuide') {
        this.cite.modeName = name
      }
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    load() {
      if (this.src == '') {
        this.src = this.cite.url
        setTimeout(() => {
          this.load()
        }, 1000)
      }
    },
    GGT(T) {
      let _this = this
      this.mySwiper = new this.Swiper('.swiper-container', {
        // allowSlidePrev: false,
        // allowSlideNext: false,
        // 改变swiper样式时，自动初始化swiper
        observer: true,
        // 监测swiper父元素，如果有变化则初始化swiper
        observeParents: true,
        loop: true,
        autoplay: {
          delay: T,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex);
            _this.swIndex = this.realIndex
            if (_this.advertisement[this.realIndex].fileType == 'video/mp4') {
              _this.bannerLoop(false)
            }
          }
        }
      })
    },
    bannerLoop(sta, n) {
      let _this = this
      if (sta) {
        _this.mySwiper.slideTo(n)
        _this.mySwiper.autoplay.start()
      } else {
        _this.mySwiper.autoplay.stop()
      }
    },
    onPause() {
      let n = this.swIndex + 1
      if (n == this.advertisement.length) {
        n = 1
      }
      this.bannerLoop(true, n)
    },
    onTimeupdate() {
      // console.log(123,e)
    },
    // 正在加载中
    loadEdmetadata() {
      // console.log(456,e)
    }
  },
  created() {},
  mounted() {
    this.load()
    if (window.outerWidth === 1080) {
      this.cite.isVertical = true
      this.isVertical = true
    } else {
      this.cite.isVertical = false
      this.isVertical = false
    }
    setInterval(() => {
      if (this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
        setTimeout(() => {
          this.GGT(this.advertisement[0].intervalTime * 1000)
        }, 500)
      }
      if (this.cite.facility != this.facility) {
        this.facility = this.cite.facility
      }
      if (this.cite.memberLoginVo != this.memberLoginVo) {
        this.memberLoginVo = this.cite.memberLoginVo
      }

if (this.appSrc == '' && this.cite.code != '') {
        this.appSrc = 'https://mps.xlmalls.com/web/code/' + this.cite.code
        // this.appSrc = 'https://mps.xlmalls.com/web/payment/' + this.cite.code
        // this.appSrc = 'https://mps.xlmalls.com/web/' + this.cite.code
        // console.log(this.appSrc)
      }
    }, 300)
  }
}
</script>

.box {
    align-items: flex-start;
    position: relative;

.left {
      width: 92.5rem;
      margin: 0;
      position: relative;
      z-index: 1;

.advertising {
        width: 100%;
        height: 52rem;
        border-radius: 1.63rem;
        //margin-bottom: 1.88rem;
        cursor: pointer;
        overflow: hidden;
        font-size: 8rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 8rem;

img {
          width: 100%;
          height: 100%;
        }
      }

.zzc {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 99;
        left: 0;
        right: 0;
      }
    }
    .right {
      width: 22rem;
    }
  }

.main {
    width: 100%;
    height: 8rem;
    border-radius: 1.63rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.8rem;
    margin-top: 1rem;

img {
      width: 8rem;
      margin-top: -1rem;
    }
  }

.icon1 {
    background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(120, 229, 217, 0.45);
  }

.icon2 {
    background: linear-gradient(180deg, #f2c952 0%, #db572b 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(255, 147, 128, 0.57);
  }

.icon3 {
    background: linear-gradient(180deg, #84b2f7 0%, #8774d2 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(150, 135, 232, 0.3);
  }

.icon4 {
    background: linear-gradient(180deg, #5be7ff 0%, #309fd8 100%);
    box-shadow: 0rem 1.25rem 1.25rem 0.06rem rgba(104, 202, 253, 0.42);
  }

.css1 {
    background: #ffffff;
    box-shadow: 0rem 0.63rem 1.25rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
    cursor: pointer;
  }

.main2 {
    width: 100%;
    height: 6.44rem;
    .css1();
    font-size: 1.88rem;
    font-weight: bold;
    color: #323232;
    line-height: 2.63rem;

img {
      width: 3.75rem;
      margin-right: 0.38rem;
    }
  }

.main3 {
    width: 100%;
    height: 9.94rem;
    .css1();
    font-size: 2.13rem;
    font-weight: bold;
    color: #323232;
    line-height: 3rem;

img {
      width: 4.25rem;
      margin-right: 0.88rem;
    }
  }

.main4 {
    width: 100%;
    height: 25rem;
    .css1();
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 2rem;

.ewm {
      width: 18rem;
      height: 18rem;
      background: #ffffff;
      border: 0.06rem solid #707070;
      position: relative;
      img {
        width: 100%;
        margin: 0;
      }
    }

.tip {
      margin-top: 1rem;
    }

img {
      width: 2.31rem;
      margin-right: 1.19rem;
    }
    .zzc {
      position: absolute;
      background: #333;
      opacity: 0.5;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

.dbTip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #323232;
    height: 3rem;
    padding: 0 3rem;
  }
}
.vertical-width-direction {
  width: 100%;
  flex-direction: column;
}
.vertical-width {
  width: 100% !important;
}
.vertical-width50 {
  width: 48% !important;
  height: 25rem !important;
  justify-content: center;
  font-size: 2.5rem !important;
}
.vertical-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>

<template>
  <div class="device">
    <div :class="['box', 'flex-between', { 'vertical-width-direction': isVertical }]">
      <div v-if="false" class="left">
        <div v-if="advertisement == []" class="advertising icon1 flex-center">广告位招租</div>
        <div v-else class="advertising flex-center">
          <img :src="advertisement[0].previewPath" model="scaleToFill" />
        </div>
      </div>
      <div :class="['left', { 'vertical-width': isVertical }]">
        <div class="zzc"></div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in advertisement" :key="index" class="swiper-slide">
              
              <div v-if="item.fileType == 'image/jpeg'" class="advertising flex-center">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              <div v-else-if="item.fileType == 'image/png'" class="advertising flex-center">
                <img :src="item.previewPath" model="scaleToFill" />
              </div>
              
              <div v-else class="advertising flex-center">
                <video
                  v-if="index == swIndex"
                  @pause="onPause"
                  @timeupdate="onTimeupdate"
                  @loadedmetadata="loadEdmetadata"
                  :src="item.previewPath"
                  autoplay
                  muted
                  style="width: 100%; height: 100%"
                ></video>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div v-if="false" class="left">
        
        <div v-if="advertisement == ''" class="advertising icon1 flex-center">广告位招租</div>
        
        <div v-else-if="advertisement.fileType == 'image/png'" class="advertising icon1 flex-center">
          <img :src="advertisement.previewPath" model="scaleToFill" />
        </div>
        
        <div v-else class="advertising icon1 flex-center">
          <video :src="advertisement.outerChainPath" autoplay loop muted style="width: 100%; height: 100%"></video>
        </div>

export default {
  name: 'device',
  components: {
    VueQr
  },
  data() {
    return {
      swIndex: 0,
      mySwiper: '',
      appSrc: '',
      memberLoginVo: '',
      advertisement: '',
      facility: '',
      src: '',
      isVertical: false
    }
  },
  methods: {
    skip(href, name) {
      let { facility } = this
      let { sta, name2 } = ''
      facility.paperNumber.forEach(item => {
        if (item.name.indexOf('A4') != -1) {
          if (item.residue < 1) {
            name2 = '请联系管理员添加' + item.name
            sta = true
          }
        }
      })
      if (sta == true) {
        this.cite.state = {
          name: name2,
          sta: true
        }
        return
      }
      // if (this.cite.memberLoginVo == '') {
      //   this.cite.state = {
      //     name: '请扫码登录设备再操作！',
      //     sta: true
      //   }
      //   return
      // }
      if (href == 'operationGuide') {
        this.cite.modeName = name
      }
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    load() {
      if (this.src == '') {
        this.src = this.cite.url
        setTimeout(() => {
          this.load()
        }, 1000)
      }
    },
    GGT(T) {
      let _this = this
      this.mySwiper = new this.Swiper('.swiper-container', {
        // allowSlidePrev: false,
        // allowSlideNext: false,
        // 改变swiper样式时，自动初始化swiper
        observer: true,
        // 监测swiper父元素，如果有变化则初始化swiper
        observeParents: true,
        loop: true,
        autoplay: {
          delay: T,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        },
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex);
            _this.swIndex = this.realIndex
            if (_this.advertisement[this.realIndex].fileType == 'video/mp4') {
              _this.bannerLoop(false)
            }
          }
        }
      })
    },
    bannerLoop(sta, n) {
      let _this = this
      if (sta) {
        _this.mySwiper.slideTo(n)
        _this.mySwiper.autoplay.start()
      } else {
        _this.mySwiper.autoplay.stop()
      }
    },
    onPause() {
      let n = this.swIndex + 1
      if (n == this.advertisement.length) {
        n = 1
      }
      this.bannerLoop(true, n)
    },
    onTimeupdate() {
      // console.log(123,e)
    },
    // 正在加载中
    loadEdmetadata() {
      // console.log(456,e)
    }
  },
  mounted() {
    console.log(window.outerHeight)
    if (window.outerWidth === 1080) {
      this.isVertical = true
    } else {
      this.isVertical = false
    }
    this.load()

setInterval(() => {
      if (this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
        setTimeout(() => {
          this.GGT(this.advertisement[0].intervalTime * 1000)
        }, 500)
      }
      if (this.cite.facility != this.facility) {
        this.facility = this.cite.facility
      }
      if (this.cite.memberLoginVo != this.memberLoginVo) {
        this.memberLoginVo = this.cite.memberLoginVo
      }