vue对接汉王ESP1020E签批屏

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 requeststimeout: 50000 ,// request timeoutheaders: {'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 errorconsole.log(error) // for debug// return Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(response => {return response.data},error => {// console.log('err' + error) // for debugMessage({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>

vue对接汉王ESP1020E签批屏相关推荐

什么是无纸化办公 |电子签批
无纸化办公就是指在不用纸张办公,在无纸化办公环境中进行的一种新型的工作方式,使得纸质文件大量减少,印刷.用纸等办公费用也相应缩减,避免纸张的浪费的同时又保护环境. 据国外媒体报道称,所谓" ...
vue 手写签名_与众不同的手写签批
随着移动互联网+时代的到来,手机成了我们日常生活中不可缺少的必备用品,它不仅仅是一个通讯工具,更是一台移动电脑.因此越来越多的单位把希望在手机上就能完成业务的处理,但也希望能还原线下办理的效果.因此, ...
好签电子签批/手写签批SDK功能特色
好签电子签批SDK,支持对PDF文件,插入签名.日期.文本.印章.图片.流媒体等内容.并支持对签名加密保存,支持写入CA证书,拥有多项自主知识产权笔迹验签技术. 1.1 签名功能功能特色:(截图均为 ...
OA办公系统快速升级方案，实现复杂流程和移动签批办公
重庆雨都科技有限公司提供了一套完整的OA升级方案,并能快速实施部署.无需更换现有的OA办公自动化系统,通过雨都中间件技术,只需要在原系统上做一些微调,即可实现系统的升级换代,提供自定义流程.表单制作. ...
android 手写签批_Android手写签批功能实现（适配Android6
Android手写签批功能的实现在于三个点,mupdf,偏移量的计算,droidText0.5.jar 实际步骤: 使用muPdf将PDF加载出来弹出透明的popwindow,popWindow使用 ...
php 手写签批手机办公_手写签批打造无纸化办公的完美替代
无纸办公,低碳环保,是近些年办公市场呈现的趋势,许多企业都开始推广OA办公系统来进行公文流转,传统的纸制办公转变为无纸化办公,极大提升了企业的运作效率. 随着科技发展,办公信息化也在与时俱进,许多原本 ...
实现华为M6平板、e人e本、iPad手写办公系统签批电脑端(Surface)显示和操作一致
移动办公设备的选择上,e人e本在便携上具备较大优势,iPad产品岁好(但是中美现阶段关系环境下,你懂的),华为最新款平板电脑M6最近获得非常大的关注度,相比iPad外观性能都不差,可选带手写笔.键盘等 ...
pdf会签_设备验收管理办法20140604(会签签批版).pdf
设备验收管理办法20140604(会签签批版)设备验收管理办法20140604(会签签批版) 河北御捷车业有限公司 ZY/ZL-01 设备验收管理办法共 9 页版本:A 编制审核批准发文号: ...
Vue对接Spring Security
Vue对接Spring Security: 使用axios进行登录,一直无法登录,提示用户名密码错误,但是用PostMan测试正常,代码如下: axios.post("api/login&q ...

vue对接汉王ESP1020E签批屏

1、安装驱动程序

2、使用

遇到问题上线遇到跨域问题

vue对接汉王ESP1020E签批屏相关推荐

最新文章

热门文章

vue对接汉王ESP1020E签批屏

1、安装驱动程序

2、使用

遇到问题 上线遇到跨域问题

vue对接汉王ESP1020E签批屏相关推荐

最新文章

热门文章

遇到问题上线遇到跨域问题