说明

需要配合汉王或绘王签字版驱动以及对应的sdk服务使用

constants.js

//汉王、绘王sdk websocket连接地址
export const WS_URLS ={1:'ws://127.0.0.1:29999', //汉王2:'ws://127.0.0.1:7181',
}export const COMMAND1 = {1: {HWPenSign: "HWStartSign",nLogo: "签字",width: "1280",height: "800",key: "", //签字版signkey! 签字版signkey! 签字版signkey!fingerFap: "1",pencolor: "000000",//笔迹颜色，RGBbackcolor: "FFDDff",//背景颜色，RGBtopcolor: "FF0000",//顶部颜色logosize: "30",//左上角文字大小logocolor: "000000",//左上角文字颜色，BGR排序logotype: "黑体",//宋体、Arial、微软雅黑、黑体可以应用frameWidth: "3",//边框宽度framecolor: "adadad",//边框颜色，RGBokcolor: "FA8072",//确定按钮颜色resigncolor: "FFA500",//重签按钮颜色okTextColor: "B22222",//确定按钮文本颜色resignTextColor: "F5F5DC",//重签按钮文本颜色RGBokTextFont: "华文新魏",//确定按钮文本字体，C:/Winodws/fonts/ 下的字体文件，部分字体无法显示resignTextFont: "隶书",//重签按钮文本字体okTextSize: "20",resignTextSize: "20",//重签按钮文本内容OkButtonText: "确定",//确定按钮文本内容ResignButtonText: "重签",logoXAxis: "10",//左上角文字X坐标logoYAxis: "15",//左上角文字Y坐标okXAxis: "1150",//确定按钮X坐标okYAxis: "5",//确定按钮Y坐标resignXAxis: "1018",//重签按钮X坐标resignYAxis: "5",//重签按钮Y坐标topHeight: "30",//标题区高度roundValue: "30",//按钮圆角ButtonHeight: "60",ButtonWidth: "120",fingerTextColor: "000000",//指纹按钮文本颜色fingerTextFont: "Simsun",//指纹按钮文本字体fingercolor: "3ff3e4",//指纹按钮颜色 RGBfingerTextSize: "20",//指纹按钮文本大小FingerButtonText: "采集指纹",//指纹按钮文本内容fingerXAxis: "885",//指纹按钮X坐标fingerYAxis: "5",//指纹按钮Y坐标
},2:'begin'
}export const COMMAND2 ={1:{HWPenSign: "HWEndSign"},2:'end'
}export const toString = (val)=>{return typeof val==='string' ?  val: JSON.stringify(val)
}

signBoard.js

import {Alert} from "./alert"; //弹窗提示可去除
import {toString, COMMAND1, WS_URLS, COMMAND2} from './constants'export class SignBoard {constructor(type = 1) {this.type = typethis.socket = nullthis._debounce = nullthis._bus = {}this._isReady = falsethis.onMessage = null}_onHanWangResponse(res) {if (typeof res === "object" && res.msgID === 0 && res.HWPenSign === "HWGetSign") {Alert.success('已操作')//签字成功事件返回this._bus.message.forEach(item => {typeof item === "function" && item(res)})typeof this.onMessage === "function" && this.onMessage(res)}if (this._debounce) clearTimeout(this._debounce)this._debounce = setTimeout(() => {if (typeof res === 'object' && res.msgID === 0 && res.HWPenSign === 'HWGetStatus') {res.DeviceStatus === 1 ? Alert.success('设备正常') : Alert.error('设备不存在')}if (typeof res === 'object' && res.msgID !== 0) {Alert.error(res.message || '设备异常')}}, 200)}_onHuiWangResponse(data) {try {if (data.type == 1) {const base64Img = "data:image/jpg;base64," + data.data;//签字成功事件返回const response = {message: base64Img,msgID:0,HWPenSign:'HWGetSign'}this._bus.message.forEach(item => {typeof item === "function" && item(response)})typeof this.onMessage === "function" && this.onMessage(response)} else {Alert.error('绘王签字版异常')}} catch (e) {console.log('[绘王签字版错误]', e);}}connect() {if (this._isReady){return}this._isReady = truethis.socket = new WebSocket(WS_URLS[this.type])this.socket.onopen = () => {this.socket.send(toString({HWPenSign: "HWGetDeviceStatus"}))}this.socket.onmessage = ({data}) => {const res = data.indexOf('{') > -1 ? JSON.parse(data) : data;if (this.type === 1) {this._onHanWangResponse(res)} else {this._onHuiWangResponse(res)}}this.socket.onclose = () => {this._isReady = false}this.socket.onerror = () => {this._isReady = falsesetTimeout(()=>{this.connect()},5000)}}disconnect() {this.socket && this.socket.close()}on(name = '', fun) {(this._bus[name] || (this._bus[name] = [])).push(fun)}off(name = '', fun) {this._bus[name] && this._bus[name].forEach((item, i) => {if (fun === item) {this._bus[name].splice(i, 1)}})}startSign() {this.socket.send(toString(COMMAND1[this.type]))}closeSign() {this.socket.send(toString(COMMAND2[this.type]))}
}const signType = 1
export default new SignBoard(signType)