han

hanfei / VueSharedPrinting

Browse code han master
1 parent 8307629 commit 48e5f7c9bbfb0e50466e0e50caf32bcf91e0426f hanfei authored on 23 Jan 2024

Patch

Showing 8 changed files

Ignore Space Show notes View package-lock.json
Not supported

Ignore Space Show notes View package.json
{ "name": "tzshare", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^1.6.3", "core-js": "^3.6.5", "html2canvas": "^1.4.1", "mqtt": "^2.18.9", "postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9", "qrcodejs2": "^0.0.2", "swiper": "^5.4.5", "vue": "^2.6.11", "vue-awesome-swiper": "^3.1.3", "vue-qr": "^4.0.9", "vue-router": "^3.2.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "less": "^4.2.0", "less-loader": "^7.3.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } { "name": "tzshare", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^1.6.3", "core-js": "^3.6.5", "html2canvas": "^1.4.1", "mqtt": "^2.18.9", "postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9", "qrcodejs2": "^0.0.2", "vue": "^2.6.11", "vue-qr": "^4.0.9", "vue-router": "^3.2.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-plugin-router": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "less": "^4.2.0", "less-loader": "^7.3.0", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

Ignore Space Show notes View

package.json

{
  "name": "tzshare",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.6.3",
    "core-js": "^3.6.5",
    "html2canvas": "^1.4.1",
    "mqtt": "^2.18.9",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "qrcodejs2": "^0.0.2",
    "swiper": "^5.4.5",
    "vue": "^2.6.11",
    "vue-awesome-swiper": "^3.1.3",
    "vue-qr": "^4.0.9",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

{
  "name": "tzshare",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.6.3",
    "core-js": "^3.6.5",
    "html2canvas": "^1.4.1",
    "mqtt": "^2.18.9",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "qrcodejs2": "^0.0.2",
    "vue": "^2.6.11",
    "vue-qr": "^4.0.9",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.2.0",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

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() }, 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() }, 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()

},
  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()

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 class="name">正在进行{{ DYZlist[0].printFileType=='PDF'?'文档':'照片' }}打印...</div> <div class="flex-center">{{ DYZlist.length }}/{{ DYZlistNum }}</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> </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: [], DYZlistNum: 1, }; }, created() { this.toLoad() }, methods: { onChange(name,val){ this[name] = val }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // this.code = 'SNJ-XX-EPSON-X001-00001' // this.load() getDeviceCode().then(res =>{ this.cite.code = res.data this.code = res.data this.load() }) }, 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=='ORDER_INFO') { //小程序支付 this.cite.url = data.payCodeUrl if(this.cite.selectedFile.length<1) { this.src = data.payCodeUrl this.zfShow=true } }else if(data.cmd=='LOGIN') { //登录 if(this.cite.memberLoginVo=='') { this.cite.memberLoginVo = data // this.cite.state = { // name: '登录设备成功！', // sta: true // } } }else if(data.cmd=='LOGOUT'){ //登出 this.cite.memberLoginVo = '' this.quit() }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{ this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then((res) => { this.cite.facility = res; }); } } } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/'+this.code] this.client.subscribe(arr, { qos: 0 }, (err) => { if (!err) { console.log(`消息订阅成功`) } else { console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { 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; } } .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; } } </style> <template> <div> <!-- 打印中提示--> <div class="dyzTip" v-if="DYZshow&&DYZlist"> <div class="curtain"></div> <div class="content"> <img src="../assets/printing.png" alt=""> <div class="name">正在进行{{ DYZlist[0].printFileType=='PDF'?'文档':'照片' }}打印...</div> <div class="flex-center">{{ DYZlist.length }}/{{ DYZlistNum }}</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> </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: [], DYZlistNum: 1, }; }, created() { this.toLoad() }, methods: { onChange(name,val){ this[name] = val }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // this.code = 'SNJ-XX-EPSON-X001-00001' // this.load() getDeviceCode().then(res =>{ this.cite.code = res.data this.code = res.data this.load() }) }, 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=='ORDER_INFO') { //小程序支付 this.cite.url = data.payCodeUrl if(this.cite.selectedFile.length<1) { this.src = data.payCodeUrl this.zfShow=true } }else if(data.cmd=='LOGIN') { //登录 if(this.cite.memberLoginVo=='') { this.cite.memberLoginVo = data this.cite.state = { name: '登录设备成功！', sta: true } } }else if(data.cmd=='LOGOUT'){ //登出 this.cite.memberLoginVo = '' }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{ this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then((res) => { this.cite.facility = res; }); } } } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/'+this.code] this.client.subscribe(arr, { qos: 0 }, (err) => { if (!err) { console.log(`消息订阅成功`) } else { console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { 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; .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; } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } </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 class="name">正在进行{{ DYZlist[0].printFileType=='PDF'?'文档':'照片' }}打印...</div>
        <div class="flex-center">{{ DYZlist.length }}/{{ DYZlistNum }}</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>
</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: [],
      DYZlistNum: 1,
    };
  },
  created() {
    this.toLoad()
  },
  methods: {
    onChange(name,val){
      this[name] = val
    },
    toLoad() {
      // this.cite.code = 'SNJ-XX-EPSON-X001-00001'
      // this.code = 'SNJ-XX-EPSON-X001-00001'
      // this.load()
      getDeviceCode().then(res =>{
        this.cite.code = res.data
        this.code = res.data
        this.load()
      })
    },
    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=='ORDER_INFO') {
          //小程序支付
          this.cite.url = data.payCodeUrl
          if(this.cite.selectedFile.length<1) {
            this.src = data.payCodeUrl
            this.zfShow=true
          }
        }else if(data.cmd=='LOGIN') {
          //登录
          if(this.cite.memberLoginVo=='') {
            this.cite.memberLoginVo = data
            // this.cite.state = {
            //   name: '登录设备成功！',
            //   sta: true
            // }
          }
        }else if(data.cmd=='LOGOUT'){
          //登出
          this.cite.memberLoginVo = ''
          this.quit()
        }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{
              this.DYZshow = false
              this.DYZlist = []
              this.DYZlistNum = 1
              this.$router.push({
                name: 'complete'
              })
              getDeviceByCode({ code: this.code }).then((res) => {
                this.cite.facility = res;
              });
            }
          }
        }
      })
    },
    //订阅多个主题
    subscribes() {
      const arr = ['/tzdy/send/device/'+this.code]
      this.client.subscribe(arr, { qos: 0 }, (err) => {
        if (!err) {
          console.log(`消息订阅成功`)
        } else {
          console.log('消息订阅失败')
        }
      })
    },
    //获取设备信息
    getDeviceByCode() {
      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>

<div class="tkTip flex-center" v-if="state.sta">
      <div>{{ state.name }}</div>
    </div>

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

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

state: '',

src: '',
      zfShow: false,

DYZlist: [],
      DYZlistNum: 1,
    };
  },
  created() {
    this.toLoad()
  },
  methods: {
    onChange(name,val){
      this[name] = val
    },
    toLoad() {
      // this.cite.code = 'SNJ-XX-EPSON-X001-00001'
      // this.code = 'SNJ-XX-EPSON-X001-00001'
      // this.load()
      getDeviceCode().then(res =>{
        this.cite.code = res.data
        this.code = res.data
        this.load()
      })
    },
    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=='ORDER_INFO') {
          //小程序支付
          this.cite.url = data.payCodeUrl
          if(this.cite.selectedFile.length<1) {
            this.src = data.payCodeUrl
            this.zfShow=true
          }
        }else if(data.cmd=='LOGIN') {
          //登录
          if(this.cite.memberLoginVo=='') {
            this.cite.memberLoginVo = data
            this.cite.state = {
              name: '登录设备成功！',
              sta: true
            }
          }
        }else if(data.cmd=='LOGOUT'){
          //登出
          this.cite.memberLoginVo = ''
        }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{
              this.DYZshow = false
              this.DYZlist = []
              this.DYZlistNum = 1
              this.$router.push({
                name: 'complete'
              })
              getDeviceByCode({ code: this.code }).then((res) => {
                this.cite.facility = res;
              });
            }
          }
        }
      })
    },
    //订阅多个主题
    subscribes() {
      const arr = ['/tzdy/send/device/'+this.code]
      this.client.subscribe(arr, { qos: 0 }, (err) => {
        if (!err) {
          console.log(`消息订阅成功`)
        } else {
          console.log('消息订阅失败')
        }
      })
    },
    //获取设备信息
    getDeviceByCode() {
      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>

Ignore Space Show notes View src/components/top.vue
<template> <div class="top flex-between"> <div class="logo flex-start" @click="_goHome()"> <img src="../assets/logo.png" /> <span></span> <div>天章自助打印</div> </div> <div class="sbzt">{{cite.memberLoginVo?'当前设备正在被使用！':''}}</div> <div class="time flex-start"> <div> <div>{{ time.week }}</div> <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div> </div> <div class="info">{{ time.h }}:{{ time.m }}</div> </div> <div class="tip flex-start"> <div v-for="(item, index) in cite.facility.paperNumber" :key="index">{{ item.name }}剩余{{ item.residue }}张</div> <!-- <div>{{cite.memberLoginVo?'已登录':'未登录'}}</div>--> </div> </div> </template> <script> export default { name: "top", data() { return { time: {}, } }, mounted() { this.format() }, methods: { add(t) { if(t<10) { return '0' + t } return t }, format() { let date = new Date(); let o = { "y": date.getFullYear(), //年 "M": this.add(date.getMonth() + 1), //月份 "d": this.add(date.getDate()), //日 "h": this.add(date.getHours()), //小时 "m": this.add(date.getMinutes()), //分 "week": '', }; let str = "星期"; switch (date.getDay()) { case 0 : str += "日"; break; case 1 : str += "一"; break; case 2 : str += "二"; break; case 3 : str += "三"; break; case 4 : str += "四"; break; case 5 : str += "五"; break; case 6 : str += "六"; break; } o.week = str this.time = o setTimeout(() =>{ this.format() },1000) }, _goHome() { this.quit() // this.$router.push({ // name: 'device' // }) } } } </script> <style scoped lang="less"> .top { width: 100%; height: 9.81rem; background: #52A39D; position: relative; .logo { padding-left: 5.5rem; font-size: 3.5rem; font-weight: 400; color: #FFFFFF; line-height: 3.69rem; img { width: 5.56rem; height: 5.56rem; } span { width: 0; height: 4.43rem; border-left: 1px solid #FFFFFF; margin: 0 1.94rem; } } .time { padding-right: 3.88rem; font-size: 1.38rem; font-weight: 400; color: #FFFFFF; line-height: 1.94rem; text-align: right; .info { font-weight: bold; color: #FFFFFF; margin-left: 1.13rem; font-size: 3.69rem; line-height: 5.2rem; } } .tip { position: absolute; bottom: .5rem; right: 3.88rem; font-size: 1.2rem; color: #fff; div { margin-left: 2rem; } } .sbzt { font-size: 3rem; font-weight: bold; color: #FFFFFF; } } </style> <template> <div class="top flex-between"> <div class="logo flex-start" @click="_goHome()"> <img src="../assets/logo.png" /> <span></span> <div>天章自助打印</div> </div> <div class="time flex-start"> <div> <div>{{ time.week }}</div> <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div> </div> <div class="info">{{ time.h }}:{{ time.m }}</div> </div> <div class="tip flex-start"> <div v-for="(item, index) in cite.facility.paperNumber" :key="index">{{ item.name }}*{{ item.residue }}</div> <div>{{cite.memberLoginVo?'已登录':'未登录'}}</div> </div> </div> </template> <script> export default { name: "top", data() { return { time: {}, } }, mounted() { this.format() }, methods: { add(t) { if(t<10) { return '0' + t } return t }, format() { let date = new Date(); let o = { "y": date.getFullYear(), //年 "M": this.add(date.getMonth() + 1), //月份 "d": this.add(date.getDate()), //日 "h": this.add(date.getHours()), //小时 "m": this.add(date.getMinutes()), //分 "week": '', }; let str = "星期"; switch (date.getDay()) { case 0 : str += "日"; break; case 1 : str += "一"; break; case 2 : str += "二"; break; case 3 : str += "三"; break; case 4 : str += "四"; break; case 5 : str += "五"; break; case 6 : str += "六"; break; } o.week = str this.time = o setTimeout(() =>{ this.format() },1000) }, _goHome() { this.quit() // this.$router.push({ // name: 'device' // }) } } } </script> <style scoped lang="less"> .top { width: 100%; height: 9.81rem; background: #52A39D; position: relative; .logo { padding-left: 5.5rem; font-size: 3.5rem; font-weight: 400; color: #FFFFFF; line-height: 3.69rem; img { width: 5.56rem; height: 5.56rem; } span { width: 0; height: 4.43rem; border-left: 1px solid #FFFFFF; margin: 0 1.94rem; } } .time { padding-right: 3.88rem; font-size: 1.38rem; font-weight: 400; color: #FFFFFF; line-height: 1.94rem; text-align: right; .info { font-weight: bold; color: #FFFFFF; margin-left: 1.13rem; font-size: 3.69rem; line-height: 5.2rem; } } .tip { position: absolute; bottom: .5rem; right: 3.88rem; font-size: 1.2rem; color: #fff; div { margin-left: 2rem; } } } </style>

Ignore Space Show notes View

src/components/top.vue

<template>
  <div class="top flex-between">
    <div class="logo flex-start" @click="_goHome()">
      <img src="../assets/logo.png" />
      <span></span>
      <div>天章自助打印</div>
    </div>
    <div class="sbzt">{{cite.memberLoginVo?'当前设备正在被使用！':''}}</div>
    <div class="time flex-start">
      <div>
        <div>{{ time.week }}</div>
        <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div>
      </div>
      <div class="info">{{ time.h }}:{{ time.m }}</div>
    </div>
    <div class="tip flex-start">
      <div v-for="(item, index) in cite.facility.paperNumber" :key="index">{{ item.name }}剩余{{ item.residue }}张</div>

    </div>
  </div>
</template>

setTimeout(() =>{
        this.format()
      },1000)
    },
    _goHome() {
      this.quit()
      // this.$router.push({
      //   name: 'device'
      // })
    }
  }
}
</script>

<template>
  <div class="top flex-between">
    <div class="logo flex-start" @click="_goHome()">
      <img src="../assets/logo.png" />
      <span></span>
      <div>天章自助打印</div>
    </div>
    <div class="time flex-start">
      <div>
        <div>{{ time.week }}</div>
        <div>{{ time.y }}/{{ time.M }}/{{ time.d }}</div>
      </div>
      <div class="info">{{ time.h }}:{{ time.m }}</div>
    </div>
    <div class="tip flex-start">
      <div v-for="(item, index) in cite.facility.paperNumber" :key="index">{{ item.name }}*{{ item.residue }}</div>
      <div>{{cite.memberLoginVo?'已登录':'未登录'}}</div>
    </div>
  </div>
</template>

setTimeout(() =>{
        this.format()
      },1000)
    },
    _goHome() {
      this.quit()
      // this.$router.push({
      //   name: 'device'
      // })
    }
  }
}
</script>

Ignore Space Show notes View src/main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import './utils/rem' import Swiper from 'swiper/js/swiper.js' Vue.prototype.Swiper = Swiper import 'swiper/css/swiper.css' import axios from 'axios' Vue.prototype.$axios = axios import cite from './utils/cite' Vue.prototype.cite = cite; import quit from './utils/quit' Vue.prototype.quit = quit; Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') import Vue from 'vue' import App from './App.vue' import router from './router' import './utils/rem' import axios from 'axios' Vue.prototype.$axios = axios import cite from './utils/cite' Vue.prototype.cite = cite; import quit from './utils/quit' Vue.prototype.quit = quit; Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')

Ignore Space Show notes View

src/main.js

Ignore Space Show notes View src/views/advertising.vue
<template> <div class="advertising flex-center" :style="advertisement==''?'':'background: #000'"> <div v-if="advertisement==''">广告位招租</div> <img v-else-if="advertisement.fileType=='image/png'" :src="advertisement.previewPath" model="scaleToFill"/> <video v-else autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video> </div> </template> <script> export default { name: "advertising", data() { return { advertisement: '' }; }, mounted() { // setInterval(()=>{ // if(this.cite.advertisement != this.advertisement) { // this.advertisement = this.cite.advertisement // } // },300) }, } </script> <style> #app .top { display: none; } .advertising { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); width: 100%; height: 100%; position: fixed; font-size: 10rem; font-weight: bold; color: #ffffff; line-height: 10rem; } .advertising img { width: 100%; height: 100%; } </style> <template> <div class="advertising flex-center" :style="advertisement==''?'':'background: #000'"> <div v-if="advertisement==''">广告位招租</div> <img v-else-if="advertisement.fileType=='image/png'" :src="advertisement.previewPath" model="scaleToFill"/> <video v-else autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video> </div> </template> <script> export default { name: "advertising", data() { return { advertisement: '' }; }, mounted() { setInterval(()=>{ if(this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement } },300) }, } </script> <style> #app .top { display: none; } .advertising { background: linear-gradient(359deg, #3dbf51 0%, #47d1a9 100%); width: 100%; height: 100%; position: fixed; font-size: 10rem; font-weight: bold; color: #ffffff; line-height: 10rem; } .advertising img { width: 100%; height: 100%; } </style>

Ignore Space Show notes View

src/views/advertising.vue

<template>
<div class="advertising flex-center" :style="advertisement==''?'':'background: #000'">
  <div v-if="advertisement==''">广告位招租</div>
  <img v-else-if="advertisement.fileType=='image/png'" :src="advertisement.previewPath" model="scaleToFill"/>
  <video v-else autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video>
</div>
</template>

export default {
  name: "advertising",
  data() {
    return {
      advertisement: ''
    };
  },
  mounted() {
    // setInterval(()=>{
    //   if(this.cite.advertisement != this.advertisement) {
    //     this.advertisement = this.cite.advertisement
    //   }
    // },300)
  },
}
</script>

Ignore Space Show notes View src/views/device.vue
<template> <div class="device"> <div class="box flex-between"> <div class="left swiper-container" v-if="false"> <div class="swiper-wrapper"> <div v-for="(item,index) in advertisement" :key="index" class="swiper-slide"> <!-- 图片--> <div v-if="item.fileType=='image/png'" class="advertising flex-center"> <img :src="item.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div v-else class="advertising flex-center"> <video :src="item.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video> </div> </div> </div> <div class="swiper-pagination"></div> </div> <div class="left"> <!-- 广告--> <div 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"> <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" v-else> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale=".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="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 { mySwiper: '', appSrc: '', memberLoginVo: '', advertisement: '', facility: '', src: '' }; }, methods: { skip(href, name) { let {facility} = this let {sta, name2} = '' facility.paperNumber.forEach(item => { 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() { this.mySwiper = new this.Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, // 改变swiper样式时，自动初始化swiper observer: true, // 监测swiper父元素，如果有变化则初始化swiper observeParents: true, loop: true, autoplay: { delay: 3000, disableOnInteraction: false } }) }, }, mounted() { this.load() setInterval(() => { if (this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement setTimeout(() => { this.GGT() }, 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/' + this.cite.code console.log(this.appSrc) } }, 300) } }; </script> <style lang="less" scoped> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; .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%; } } } .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: .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; } } </style> <template> <div class="device"> <div class="box flex-between"> <div class="left"> <!-- 广告--> <div class="advertising icon1 flex-center" v-if="advertisement==''">广告位招租</div> <!-- 图片--> <div class="advertising icon1 flex-center" v-else-if="advertisement.fileType=='image/png'"> <img :src="advertisement.previewPath" model="scaleToFill"/> </div> <!-- 视频--> <div class="advertising icon1 flex-center" v-else> <video autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video> </div> <div class="box2 flex-between" v-show="false"> <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"> <div class="main4 flex-center"> <div> <span class="flex-center"> <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white"></VueQr> </span> <span v-show="false" class="flex-center"> <div v-show="!src">支付宝小程序码</div> <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> </span> <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="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 { appSrc: '', advertisement: '', facility: '', src: '' }; }, methods: { skip(href, name) { let {facility} = this let {sta,name2} = '' facility.paperNumber.forEach(item => { 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) } }, }, mounted() { this.load() setInterval(()=>{ if(this.cite.advertisement != this.advertisement) { this.advertisement = this.cite.advertisement } if(this.cite.facility != this.facility) { this.facility = this.cite.facility } if(this.appSrc==''&&this.cite.code!='') { this.appSrc = 'https://mps.xlmalls.com/web/'+this.cite.code console.log(this.appSrc) } },300) } }; </script> <style scoped lang="less"> .device { margin: 2rem 2rem 0; .box { align-items: flex-start; .left { width: 92.5rem; .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%; } } } .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; span { width: 18rem; height: 18rem; background: #ffffff; border: 0.06rem solid #707070; //margin: 1rem auto 0; img { width: 100%; margin: 0; } } .tip { margin-top: 1rem; } img { width: 2.31rem; margin-right: 1.19rem; } } .dbTip { position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.2rem; font-weight: 400; color: #323232; height: 3rem; padding: 0 3rem; } } </style>

Ignore Space Show notes View

src/views/device.vue

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left swiper-container" v-if="false">
        <div class="swiper-wrapper">
          <div v-for="(item,index) in advertisement" :key="index" class="swiper-slide">
            
            <div v-if="item.fileType=='image/png'" class="advertising flex-center">
              <img :src="item.previewPath" model="scaleToFill"/>
            </div>
            
            <div v-else class="advertising flex-center">
              <video :src="item.outerChainPath" autoplay loop muted style="width: 100%;height: 100%;"></video>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="left">
        
        <div class="advertising icon1 flex-center">广告位招租</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">
        <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" v-else>
              <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')"
                     :logoMargin="0"
                     :logoScale=".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="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 {
      mySwiper: '',
      appSrc: '',
      memberLoginVo: '',
      advertisement: '',
      facility: '',
      src: ''
    };
  },
  methods: {
    skip(href, name) {
      let {facility} = this
      let {sta, name2} = ''
      facility.paperNumber.forEach(item => {
        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() {
      this.mySwiper = new this.Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
        // 改变swiper样式时，自动初始化swiper
        observer: true,
        // 监测swiper父元素，如果有变化则初始化swiper
        observeParents: true,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      })
    },
  },
  mounted() {
    this.load()

setInterval(() => {
      if (this.cite.advertisement != this.advertisement) {
        this.advertisement = this.cite.advertisement
        setTimeout(() => {
          this.GGT()
        }, 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/' + this.cite.code
        console.log(this.appSrc)
      }
    }, 300)
  }
};
</script>

.box {
    align-items: flex-start;

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

.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: .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;
  }
}
</style>

<template>
  <div class="device">
    <div class="box flex-between">
      <div class="left">
        
        <div class="advertising icon1 flex-center" v-if="advertisement==''">广告位招租</div>
        
        <div class="advertising icon1 flex-center" v-else-if="advertisement.fileType=='image/png'">
          <img :src="advertisement.previewPath" model="scaleToFill"/>
        </div>
        
        <div class="advertising icon1 flex-center" v-else>
          <video autoplay loop muted :src="advertisement.outerChainPath" style="width: 100%;height: 100%;"></video>
        </div>

<div class="box2 flex-between" v-show="false">
          <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">
        <div class="main4 flex-center">
          <div>
            <span class="flex-center">
            <VueQr v-if="appSrc" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0"
                   :logoScale=".2" :margin="0" :size="300" :text="appSrc" logoBackgroundColor="white"></VueQr>
          </span>
            <span v-show="false" class="flex-center">
            <div v-show="!src">支付宝小程序码</div>
            <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>
          </span>
            <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="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 {
      appSrc: '',
      advertisement: '',
      facility: '',
      src: ''
    };
  },
  methods: {
    skip(href, name) {
      let {facility} = this
      let {sta,name2} = ''
      facility.paperNumber.forEach(item => {
        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)
      }
    },
  },
  mounted() {
    this.load()

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

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

Show line notes below