添加mqtt

hanfei / VueSharedPrinting

Browse code 添加mqtt master
1 parent 3f4d1f2 commit e051978042c6f8628339376cda82720a1879c112 hanfei authored on 9 Jan 2024

Patch

Showing 6 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", "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" ] } { "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": "^5.3.4", "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",
    "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"
  ]
}

{
  "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": "^5.3.4",
    "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/> <router-view/> </div> </template> <script> import top from '@/components/top.vue' import mqtt from "mqtt/dist/mqtt" export default { name: 'Home', components: { top }, data() { return { client: null }; }, mounted() { this.initMqtt() }, methods: { initMqtt() { // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: 'mqttjs_3d451e7c12', //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('tcp://192.168.250.29:8083/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) }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/sbbh'] this.client.subscribe(arr, { qos: 0 }, (err) => { if (!err) { console.log(`消息订阅成功`) } else { console.log('消息订阅失败') } }) }, } } </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/> <router-view/> </div> </template> <script> import top from '@/components/top.vue' export default { name: 'Home', components: { top } } </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
  },
  data() {
    return {
      client: null
    };
  },
  mounted() {
    this.initMqtt()
  },
  methods: {
    initMqtt() {
      // 连接配置选项
      let options = {
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: 'mqttjs_3d451e7c12', //不填默认随机生成一个ID
        username: 'admin', //用户名
        password: 'public' //密码
      }
      this.client = mqtt.connect('tcp://192.168.250.29:8083/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)
      })
    },
    //订阅多个主题
    subscribes() {
      const arr = ['/tzdy/send/device/sbbh']
      this.client.subscribe(arr, { qos: 0 }, (err) => {
        if (!err) {
          console.log(`消息订阅成功`)
        } else {
          console.log('消息订阅失败')
        }
      })
    },
  }
}
</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/router/index.js
import Vue from 'vue' import VueRouter from 'vue-router' import device from '../views/device.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'device', component: device }, { path: '/operationGuide', name: 'operationGuide', component: () => import('../views/operationGuide.vue') }, { path: '/selectFile', name: 'selectFile', component: () => import('../views/selectFile.vue') }, { path: '/transcoding', name: 'transcoding', component: () => import('../views/transcoding.vue') }, { path: '/argument', name: 'argument', component: () => import('../views/argument.vue') }, { path: '/expense', name: 'expense', component: () => import('../views/expense.vue') }, { path: '/pay', name: 'pay', component: () => import('../views/pay.vue') }, { path: '/complete', name: 'complete', component: () => import('../views/complete.vue') }, { path: '/explain', name: 'explain', component: () => import('../views/explain.vue') }, { //广告页 path: '/advertising', name: 'advertising', component: () => import('../views/advertising.vue') } ] const router = new VueRouter({ routes }) export default router import Vue from 'vue' import VueRouter from 'vue-router' import device from '../views/device.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'device', component: device }, { path: '/operationGuide', name: 'operationGuide', component: () => import('../views/operationGuide.vue') }, { path: '/selectFile', name: 'selectFile', component: () => import('../views/selectFile.vue') }, { path: '/transcoding', name: 'transcoding', component: () => import('../views/transcoding.vue') }, { path: '/argument', name: 'argument', component: () => import('../views/argument.vue') }, { path: '/expense', name: 'expense', component: () => import('../views/expense.vue') }, { path: '/pay', name: 'pay', component: () => import('../views/pay.vue') }, { path: '/complete', name: 'complete', component: () => import('../views/complete.vue') }, { path: '/explain', name: 'explain', component: () => import('../views/explain.vue') } ] const router = new VueRouter({ routes }) export default router

Ignore Space Show notes View

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import device from '../views/device.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'device',
    component: device
  },
  {
    path: '/operationGuide',
    name: 'operationGuide',
    component: () => import('../views/operationGuide.vue')
  },
  {
    path: '/selectFile',
    name: 'selectFile',
    component: () => import('../views/selectFile.vue')
  },
  {
    path: '/transcoding',
    name: 'transcoding',
    component: () => import('../views/transcoding.vue')
  },
  {
    path: '/argument',
    name: 'argument',
    component: () => import('../views/argument.vue')
  },
  {
    path: '/expense',
    name: 'expense',
    component: () => import('../views/expense.vue')
  },
  {
    path: '/pay',
    name: 'pay',
    component: () => import('../views/pay.vue')
  },
  {
    path: '/complete',
    name: 'complete',
    component: () => import('../views/complete.vue')
  },
  {
    path: '/explain',
    name: 'explain',
    component: () => import('../views/explain.vue')
  },
  {
    //广告页
    path: '/advertising',
    name: 'advertising',
    component: () => import('../views/advertising.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

import Vue from 'vue'
import VueRouter from 'vue-router'
import device from '../views/device.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

export default router

Ignore Space Show notes View src/views/advertising.vue 0 → 100644
<template> <div class="advertising flex-center"> 广告位招租 </div> </template> <script> export default { name: "advertising" } </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; } </style>

Ignore Space Show notes View src/views/expense.vue
<template> <!-- 费用支付--> <div class="expense"> <navbar :name="name"/> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div> </div> <div class="right"> <div class="code" @click="skip('complete',name)"> <VueQr :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc"></VueQr> </div> <div class="flex-center tip">提示：请在 120 秒内完成扫码支付</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import VueQr from 'vue-qr' import bdRequest from "../utils/bdRequest"; export default { name: "expense", components: { navbar,VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.$route.params.name, appSrc: '', client: '', selectedFile: this.cite.selectedFile, listData: { "code":"20240104231724631239-0", "copies":1, "printFileId":112, "printFileType":"PDF", "printingColor":"BW", "printingFaces":"SINGLE" } } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, downloadPDF(id,name) { downloadPDF({id: id}).then(res => { const fileName = name const blob = new Blob([res], {type: 'application/octet-stream'}) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }).catch(() => { }) }, async dayin() { let _this = this let {listData,selectedFile} = _this let i = '', deta='' selectedFile.forEach((item,index) => { if(listData.printFileId == item.id) { i=index deta = item } }) await this.downloadPDF(listData.printFileId,listData.printFileName) console.log('打印',deta) setTimeout(() =>{ _this.selectedFile.splice(i, 1) let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { // "PrinterName": "EPSON WF-C5890 Series", "PrinterName": "EPSON WF-C5890 Series", "SourceFile": 'C:\\datasource\\'+listData.printFileName, "FileType": "pdf", "PrintColor": "", "DblPrt": "" } }) setTimeout(()=>{ if(_this.selectedFile.length>0) { _this.getPrintTask() }else{ _this.cite.orderId = '' _this.skip('complete',_this.name) } },1000) console.log(res) },2000) }, async getPrintTask() { let _this = this if(_this.cite.orderId) { let res = await getPrintTask({orderId: _this.cite.orderId}) // console.log(res,'数据') if(res.data) { _this.listData = res.data _this.dayin() }else{ setTimeout(()=>{ _this.getPrintTask() },1000) } } }, load() { let _this = this getPayQrCode({orderId: _this.cite.orderId}).then(res => { // console.log(res.data.qrCode) if(res.data.qrCode) { _this.appSrc = res.data.qrCode setTimeout(() =>{ // _this.dayin() _this.getPrintTask() },1000) } }) }, }, mounted() { console.log(this.selectedFile) this.load() } } </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; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #FFFFFF; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } </style> <template> <!-- 费用支付--> <div class="expense"> <navbar :name="name"/> <div class="box flex-center"> <div class="left"> <div class="title">温馨提示</div> <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div> </div> <div class="right"> <div class="code" @click="skip('complete',name)"> <VueQr :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc"></VueQr> </div> <div class="flex-center tip">提示：请在 120 秒内完成扫码支付</div> </div> </div> </div> </template> <script> import navbar from '@/components/nav' import {getPayQrCode, downloadPDF, getPrintTask} from "../api/resultApi"; import VueQr from 'vue-qr' import bdRequest from "../utils/bdRequest"; // import mqtt from 'mqtt' export default { name: "expense", components: { navbar,VueQr }, provide() { return { title: '', type: this.name } }, data() { return { name: this.$route.params.name, appSrc: '', client: '', selectedFile: this.cite.selectedFile, listData: { "code":"20240104231724631239-0", "copies":1, "printFileId":112, "printFileType":"PDF", "printingColor":"BW", "printingFaces":"SINGLE" } } }, methods: { skip(href,name) { this.$router.push({ name: href, params: { name: name } }) }, mqtt() { // const options = { // connectTimeout: 40000, // username: 'admin', // password: 'public', // clean: true // } // this.client = mqtt.connect('tcp://192.168.250.29:1883', options) // this.mqttMsg() }, mqttMsg() { this.client.on('connect', () => { console.log("连接成功！！！") this.client.subscribe('/tzdy/send/device/sbbh', { qos: 0 }, (error) => { if (!error) { console.log('订阅成功') } else { console.log('订阅失败') } }) }) // 接收消息处理 this.client.on('message', (topic, message) => { console.log('收到来自', topic, '的消息', message.toString()) this.msg = message.toString() }) }, downloadPDF(id,name) { downloadPDF({id: id}).then(res => { const fileName = name const blob = new Blob([res], {type: 'application/octet-stream'}) if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName) } else { let link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = fileName link.click() window.URL.revokeObjectURL(link.href) } }).catch(() => { }) }, async dayin() { let _this = this let {listData,selectedFile} = _this let i = '', deta='' selectedFile.forEach((item,index) => { if(listData.printFileId == item.id) { i=index deta = item } }) await this.downloadPDF(listData.printFileId,listData.printFileName) console.log('打印',deta) setTimeout(() =>{ _this.selectedFile.splice(i, 1) let res = bdRequest({ method: 'post', url: '/api/Printer/Print', post: '8080', data: { // "PrinterName": "EPSON WF-C5890 Series", "PrinterName": "EPSON WF-C5890 Series", "SourceFile": 'C:\\datasource\\'+listData.printFileName, "FileType": "pdf", "PrintColor": "", "DblPrt": "" } }) setTimeout(()=>{ if(_this.selectedFile.length>0) { _this.getPrintTask() }else{ _this.cite.orderId = '' _this.skip('complete',_this.name) } },1000) console.log(res) },2000) }, async getPrintTask() { let _this = this if(_this.cite.orderId) { let res = await getPrintTask({orderId: _this.cite.orderId}) // console.log(res,'数据') if(res.data) { _this.listData = res.data _this.dayin() }else{ setTimeout(()=>{ _this.getPrintTask() },1000) } } }, load() { let _this = this getPayQrCode({orderId: _this.cite.orderId}).then(res => { // console.log(res.data.qrCode) if(res.data.qrCode) { _this.appSrc = res.data.qrCode // _this.mqtt() setTimeout(() =>{ // _this.dayin() _this.getPrintTask() },1000) } }) }, }, mounted() { console.log(this.selectedFile) this.load() } } </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; } } .right { width: 62.81rem; .css1(); font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3.13rem; .code { display: inline-block; width: 23.25rem; height: 22.88rem; background: #FFFFFF; //border: 0.06rem solid #707070; margin: 2.94rem auto 1.19rem; img { width: 100%; height: auto; } } } } </style>

Ignore Space Show notes View

src/views/expense.vue

<template>

<div class="expense">
  <navbar :name="name"/>
  <div class="box flex-center">
    <div class="left">
      <div class="title">温馨提示</div>
      <div class="content">请在建议时限内尽快完成支付，如果操作超时本次打印业务可能需要重新提交。</div>
    </div>
    <div class="right">
      <div class="code" @click="skip('complete',name)">
        <VueQr :logo-src="require('@/assets/logo.png')" :logoScale=".2" :logoMargin="0" logoBackgroundColor="white" :size="300" :margin="0" :auto-color="true" :dot-scale="1" :text="appSrc"></VueQr>
      </div>
      <div class="flex-center tip">提示：请在 120 秒内完成扫码支付</div>
    </div>
  </div>
</div>
</template>

export default {
  name: "expense",
  components: {
    navbar,VueQr
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.$route.params.name,
      appSrc: '',
      client: '',

selectedFile: this.cite.selectedFile,
      listData: {
        "code":"20240104231724631239-0",
        "copies":1,
        "printFileId":112,
        "printFileType":"PDF",
        "printingColor":"BW",
        "printingFaces":"SINGLE"
      }
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    downloadPDF(id,name) {
      downloadPDF({id: id}).then(res => {
        const fileName = name
        const blob = new Blob([res], {type: 'application/octet-stream'})
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
        }
      }).catch(() => {
      })
    },
    async dayin() {
      let _this = this
      let {listData,selectedFile} = _this
      let i = '', deta=''
      selectedFile.forEach((item,index) => {
        if(listData.printFileId == item.id) {
          i=index
          deta = item
        }
      })
      await this.downloadPDF(listData.printFileId,listData.printFileName)
      console.log('打印',deta)
      setTimeout(() =>{
        _this.selectedFile.splice(i, 1)
        let res = bdRequest({
          method: 'post',
          url: '/api/Printer/Print',
          post: '8080',
          data: {
            // "PrinterName": "EPSON WF-C5890 Series",
            "PrinterName": "EPSON WF-C5890 Series",
            "SourceFile": 'C:\\datasource\\'+listData.printFileName,
            "FileType": "pdf",
            "PrintColor": "",
            "DblPrt": ""
          }
        })
        setTimeout(()=>{
          if(_this.selectedFile.length>0) {
            _this.getPrintTask()
          }else{
            _this.cite.orderId = ''
            _this.skip('complete',_this.name)
          }
        },1000)
        console.log(res)
      },2000)
    },
    async getPrintTask() {
      let _this = this
      if(_this.cite.orderId) {
        let res = await getPrintTask({orderId: _this.cite.orderId})
        // console.log(res,'数据')
        if(res.data) {
          _this.listData = res.data
          _this.dayin()
        }else{
          setTimeout(()=>{
            _this.getPrintTask()
          },1000)
        }
      }
    },
    load() {
      let _this = this
      getPayQrCode({orderId: _this.cite.orderId}).then(res => {
        // console.log(res.data.qrCode)
        if(res.data.qrCode) {
          _this.appSrc = res.data.qrCode
          setTimeout(() =>{
            // _this.dayin()
            _this.getPrintTask()
          },1000)
        }
      })
    },
  },
  mounted() {
    console.log(this.selectedFile)
    this.load()
  }
}
</script>

})
      // 接收消息处理
      this.client.on('message', (topic, message) => {
        console.log('收到来自', topic, '的消息', message.toString())
        this.msg = message.toString()
      })
    },
    downloadPDF(id,name) {
      downloadPDF({id: id}).then(res => {
        const fileName = name
        const blob = new Blob([res], {type: 'application/octet-stream'})
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href)
        }
      }).catch(() => {
      })
    },
    async dayin() {
      let _this = this
      let {listData,selectedFile} = _this
      let i = '', deta=''
      selectedFile.forEach((item,index) => {
        if(listData.printFileId == item.id) {
          i=index
          deta = item
        }
      })
      await this.downloadPDF(listData.printFileId,listData.printFileName)
      console.log('打印',deta)
      setTimeout(() =>{
        _this.selectedFile.splice(i, 1)
        let res = bdRequest({
          method: 'post',
          url: '/api/Printer/Print',
          post: '8080',
          data: {
            // "PrinterName": "EPSON WF-C5890 Series",
            "PrinterName": "EPSON WF-C5890 Series",
            "SourceFile": 'C:\\datasource\\'+listData.printFileName,
            "FileType": "pdf",
            "PrintColor": "",
            "DblPrt": ""
          }
        })
        setTimeout(()=>{
          if(_this.selectedFile.length>0) {
            _this.getPrintTask()
          }else{
            _this.cite.orderId = ''
            _this.skip('complete',_this.name)
          }
        },1000)
        console.log(res)
      },2000)
    },
    async getPrintTask() {
      let _this = this
      if(_this.cite.orderId) {
        let res = await getPrintTask({orderId: _this.cite.orderId})
        // console.log(res,'数据')
        if(res.data) {
          _this.listData = res.data
          _this.dayin()
        }else{
          setTimeout(()=>{
            _this.getPrintTask()
          },1000)
        }
      }
    },
    load() {
      let _this = this
      getPayQrCode({orderId: _this.cite.orderId}).then(res => {
        // console.log(res.data.qrCode)
        if(res.data.qrCode) {
          _this.appSrc = res.data.qrCode
          // _this.mqtt()
          setTimeout(() =>{
            // _this.dayin()
            _this.getPrintTask()
          },1000)
        }
      })
    },
  },
  mounted() {
    console.log(this.selectedFile)
    this.load()
  }
}
</script>

Show line notes below