說明

需要配合漢王或繪王簽字版驅動以及對應的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)