说明

需要配合汉王或绘王签字版驱动以及对应的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",//笔迹颜色，RGB
    backcolor: "FFDDff",//背景颜色，RGB
    topcolor: "FF0000",//顶部颜色
    logosize: "30",//左上角文字大小
    logocolor: "000000",//左上角文字颜色，BGR排序
    logotype: "黑体",//宋体、Arial、微软雅黑、黑体可以应用
    frameWidth: "3",//边框宽度
    framecolor: "adadad",//边框颜色，RGB
    okcolor: "FA8072",//确定按钮颜色
    resigncolor: "FFA500",//重签按钮颜色
    okTextColor: "B22222",//确定按钮文本颜色
    resignTextColor: "F5F5DC",//重签按钮文本颜色RGB
    okTextFont: "华文新魏",//确定按钮文本字体，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",//指纹按钮颜色 RGB
    fingerTextSize: "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 = type
    this.socket = null
    this._debounce = null
    this._bus = {}

    this._isReady = false
    this.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 = true
    this.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 = false

      setTimeout(()=>{
        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)