vue对接汉王ESP1020E签批屏
1、安装驱动程序2、使用2-1、新建vue.config.js// vue.config.jsconst path = require('path')const resolve = (dir) => path.join(__dirname, dir);module.exports = {publicPath:"./",// 公共路径outputDir: 'dist', // 'dist',
·
1、安装驱动程序
2、使用
2-1、新建vue.config.js
// vue.config.js
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
publicPath:"./", // 公共路径
outputDir: 'dist', // 'dist', 生产环境构建文件的目录
assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: '',
resolve: {
alias: {
'@': resolve('src')
}
}
},
devServer: {
port: 8899,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://127.0.0.1:29999/HWPenSign',
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
}
}
2-2、新建请求工具类qianpipinghttp.js
import axios from 'axios'
import { Message } from 'element-ui'
var service = axios.create({
baseURL: '/api',
withCredentials: true, // send cookies when cross-domain requests
timeout: 50000 ,// request timeout
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json'
}
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
// let token = store.getters.token
// if (token) {
// // let each request carry token
// // ['X-Token'] is a custom headers key
// // please modify it according to the actual situation
// config.headers['token'] = token
// // console.log(config)
// }
return config
},
error => {
// do something with request error
console.log(error) // for debug
// return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
return response.data
},
error => {
// console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
// return Promise.reject(error)
}
)
export default service
2-3、新建api接口函数qianpiping.js
import request from '@/utils/qianpipinghttp'
//初始化设备
export function initDevice(data) {
return request({
url: '/HWGetDeviceStatus',
method: 'get',
data
})
}
//打开设备
export function openDevice(data) {
return request({
url: '/HWInitialize',
method: 'get',
data
})
}
//关闭设备
export function closeDevice(data) {
return request({
url: '/HWFinalize',
method: 'get',
data
})
}
//获取签名
export function getSign(data) {
return request({
url: '/HWGetSign',
method: 'get',
data
})
}
//获取签名
export function signAgain(data) {
return request({
url: '/HWClearPenSign',
method: 'get',
data
})
}
//推送界面
export function pushPage(data) {
return request({
url: '/HWMovePage',
method: 'get',
data
})
}
//展示界面
export function showPage(data) {
return request({
url: '/HWShowUrl',
method: 'get',
data
})
}
//关闭展示界面
export function closeShowPage(data) {
return request({
url: '/HWCloseUrl',
method: 'get',
data
})
}
2-4、页面使用
<template>
<div class="home">
<div>
<img id="signimg" width="500" height="300" />
</div>
<el-button type="primary" @click="openDevice">打开设备</el-button>
<!-- <el-button type="primary" @click="closeDevice">关闭设备</el-button> -->
<el-button type="primary" @click="signAgain">重新签名</el-button>
<el-button type="primary" @click="pushPage">推送页面</el-button>
<!-- <el-button type="primary" @click="showPage">展示页面</el-button>
<el-button type="primary" @click="closeShowPage">关闭展示页面</el-button>-->
</div>
</template>
<script>
import {
initDevice,
openDevice,
closeDevice,
getSign,
signAgain,
pushPage,
showPage,
closeShowPage
} from "../api/qianpiping";
export default {
name: "HelloWorld",
data() {
return {
timer: null,
deviceStatus: "close"
};
},
props: {
msg: String
},
created() {
//初始化设备
this.initDevice();
},
methods: {
//初始化设备
async initDevice() {
let res = await initDevice();
console.log(res, "初始化设备");
},
//打开设备
async openDevice() {
let res = await openDevice();
console.log(res, "打开设备");
if (res.msgID == 0) {
this.timer = setInterval(this.getSign, 2000);
} else {
//this.$message.error(res.message)
}
},
//关闭设备
async closeDevice() {
let res = await closeDevice();
console.log(res, "关闭设备");
if (res.msgID == 0) {
clearInterval(this.timer);
} else {
//this.$message.error(res.message)
}
},
//获取签名
async getSign() {
let data = {
nImageType: "3",
nImageWidth: "500",
nImageHeight: "300"
};
let res = await getSign(data);
console.log(res, "获取签名");
if (res.msgID == 0) {
clearInterval(this.timer);
document.getElementById("signimg").src = res.message;
} else if (res.msgID == -15) {
clearInterval(this.timer);
//this.$message.error(res.message)
} else {
//this.$message.error(res.message)
}
},
//重新签名
async signAgain() {
let res = await signAgain();
console.log(res, "重新签名");
},
//推送界面
async pushPage() {
let data = {
webPageName: document.title
};
let res = await pushPage(data);
console.log(res, "推送界面");
},
//展示界面
async showPage() {
let data = {
url: "ZGVtb1xBcGlEZW1vLmh0bWw=",
flagUrl: "1"
};
let res = await showPage(data);
console.log(res, "展示界面");
},
//关闭展示界面
async closeShowPage() {
let res = await closeShowPage();
console.log(res, "关闭展示界面");
}
},
destroyed() {
this.closeDevice();
clearInterval(this.timer);
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
遇到问题 上线遇到跨域问题
main.js
import axios from 'axios'
axios.jsonp = (url,data)=>{
if(!url)
throw new Error('url is necessary')
const callback = 'CALLBACK' + Math.random().toString().substr(9,18)
const JSONP = document.createElement('script')
JSONP.setAttribute('type','text/javascript')
const headEle = document.getElementsByTagName('head')[0]
let ret = '';
if(data){
if(typeof data === 'string')
ret = '&' + data;
else if(typeof data === 'object') {
for(let key in data)
ret += '&' + key + '=' + encodeURIComponent(data[key]);
}
ret += '&_time=' + Date.now();
}
JSONP.src = `${url}?callback=${callback}${ret}`;
return new Promise( (resolve,reject) => {
window[callback] = r => {
resolve(r)
headEle.removeChild(JSONP)
delete window[callback]
}
headEle.appendChild(JSONP)
})
}
Vue.prototype.$axios= axios
使用
<template>
<div class="hello">
<div>
<img id="signimg" width="500" height="300" />
</div>
<el-button type="primary" @click="openDevice">打开设备</el-button>
<!-- <el-button type="primary" @click="closeDevice">关闭设备</el-button> -->
<el-button type="primary" @click="signAgain">重新签名</el-button>
<el-button type="primary" @click="pushPage">推送页面</el-button>
<!-- <el-button type="primary" @click="showPage">展示页面</el-button>
<el-button type="primary" @click="closeShowPage">关闭展示页面</el-button>-->
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
timer: null,
deviceStatus: "close"
};
},
props: {
msg: String
},
created() {
//初始化设备
this.initDevice();
},
methods: {
//初始化设备
async initDevice() {
// let res = await initDevice();
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWGetDeviceStatus`)
console.log(res, "初始化设备");
},
//打开设备
async openDevice() {
// let res = await openDevice();
// console.log(res, "打开设备");
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWInitialize`)
console.log(res, "打开设备");
if (res.msgID == 0) {
this.timer = setInterval(this.getSign, 2000);
} else {
//this.$message.error(res.message)
}
},
//关闭设备
async closeDevice() {
// let res = await closeDevice();
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWFinalize`)
console.log(res, "关闭设备");
if (res.msgID == 0) {
clearInterval(this.timer);
} else {
//this.$message.error(res.message)
}
},
//获取签名
async getSign() {
let data = {
nImageType: "3",
nImageWidth: "500",
nImageHeight: "300"
};
// let res = await getSign(data);
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWGetSign`,data)
console.log(res, "获取签名");
if (res.msgID == 0) {
clearInterval(this.timer);
document.getElementById("signimg").src = res.message;
} else if (res.msgID == -15) {
clearInterval(this.timer);
//this.$message.error(res.message)
} else {
//this.$message.error(res.message)
}
},
//重新签名
async signAgain() {
// let res = await signAgain();
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWClearPenSign`)
console.log(res, "重新签名");
},
//推送界面
async pushPage() {
let data = {
webPageName: document.title
};
// let res = await pushPage(data);
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWMovePage`,data)
console.log(res, "推送界面");
},
//展示界面
async showPage() {
let data = {
url: "ZGVtb1xBcGlEZW1vLmh0bWw=",
flagUrl: "1"
};
// let res = await showPage(data);
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWShowUrl`,data)
console.log(res, "展示界面");
},
//关闭展示界面
async closeShowPage() {
// let res = await closeShowPage();
let res = await this.$axios.jsonp(`http://localhost:29999/HWPenSign/HWCloseUrl`)
console.log(res, "关闭展示界面");
}
},
destroyed() {
this.closeDevice();
clearInterval(this.timer);
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献19条内容
所有评论(0)