企业官网建设流程全解析

目录

一、项目概述

1. 项目目标

2. 核心场景

3. 核心技术栈

二、项目实施阶段与里程碑

三、详细实施步骤

（一）环境搭建阶段

1. 硬件环境准备

2. 开发环境配置

（二）核心功能开发阶段

1. 后端开发

（1）数据库设计

（2）核心模块开发

（3）汉王 ESP560 适配

2. 前端开发

（1）核心页面开发

（2）ESP560 前端对接核心代码

（三）测试验证阶段

1. 测试类型与用例

2. 问题整改

（四）部署上线阶段

1. 生产环境部署

2. 用户培训

3. 上线验收

（五）运维保障阶段

1. 日常运维

2. 故障处理

四、合规与风险控制

1. 法律效力保障

2. 数据安全

3. 风险预案

五、项目交付物清单

六、项目成本与资源

1. 人力成本

2. 硬件成本

3. 软件成本

七、项目成功指标

一、项目概述

1. 项目目标

基于 SpringBoot 框架集成汉王 ESP560 签名屏，实现考核场景下的原笔迹电子签名全流程管理，涵盖「考核单创建→签名采集→数据加密存储→笔迹核验→PDF 导出→日志审计」，替代传统纸质签名，提升考核流程数字化、合规化水平。

2. 核心场景

• 员工绩效考核结果确认签名；
• 考试 / 测评成绩确认签名；
• 培训考核签到 / 签退签名；
• 考核流程多级审批签名。

3. 核心技术栈

二、项目实施阶段与里程碑

三、详细实施步骤

（一）环境搭建阶段

1. 硬件环境准备

• 汉王 ESP560 部署：按考核点位配置签名屏，每台终端（Windows 10/11）通过 USB 连接 ESP560，安装官方驱动（验证：设备管理器识别 “Hanvon ESP560 Sign Pad”，汉王测试工具可采集笔迹）；
• 服务器环境：部署 MySQL（主从备份）、Redis（集群），配置服务器端口（8080、6379、3306）开放。

2. 开发环境配置

• 后端环境：JDK 17、Maven 3.8、IDEA，引入汉王 ESP560 SDK（hanvon-esp560-sdk.jar放入 lib 目录）；
• 前端环境：Node.js 16+、Vite，安装 Vue3、Element Plus 等依赖；
• 测试环境：搭建与生产一致的 Windows 终端，部署 ESP560 设备，模拟考核场景。

（二）核心功能开发阶段

1. 后端开发

（1）数据库设计

• 考核主表（examination）：存储考核单号、类型、状态、被考核人等；
• 签名记录表（exam_sign_record）：存储签名原始数据（加密）、压感信息、设备 ID、验签状态等；
• 用户表（sys_user）：存储员工账号、权限、历史签名特征等；
• 操作日志表（sys_oper_log）：存储签名 / 核验 / 导出等操作记录。

（2）核心模块开发

（3）汉王 ESP560 适配

• 封装HanvonESP560Client：实现设备心跳检测、笔迹数据格式校验、离线数据同步；
• 国密加密集成：对 ESP560 采集的笔迹原始数据（坐标 + 压力 + 时间戳）进行 SM4 加密存储，SM3 生成摘要防篡改。

2. 前端开发

（1）核心页面开发

（2）ESP560 前端对接核心代码

vue

<template> <div class="sign-page"> <el-card title="考核签名确认"> <div class="exam-info"> <p>考核单号：{{ examNo }}</p> <p>考核类型：{{ examType }}</p> <p>考核内容：{{ examContent }}</p> </div> <!-- ESP560签名区域 --> <div class="sign-container"> <canvas ref="signCanvas" width="800" height="480" class="sign-canvas"></canvas> <div class="btn-group"> <el-button @click="initDevice" type="primary" :disabled="deviceReady">初始化签名屏</el-button> <el-button @click="startSign" type="success" :disabled="!deviceReady || signing">开始签名</el-button> <el-button @click="stopSign" type="warning" :disabled="!signing">停止签名</el-button> <el-button @click="submitSign" type="danger" :disabled="!hasSign">提交签名</el-button> </div> </div> </el-card> </div> </template> <script setup> import { ref, reactive, onMounted, onUnmounted } from 'vue'; import { ElMessage, ElMessageBox } from 'element-plus'; import axios from 'axios'; import HanvonESP560 from '@/utils/hanvon-esp560-sdk.js'; // 考核信息（从路由参数获取） const route = useRoute(); const examNo = ref(route.query.examNo); const examType = ref(''); const examContent = ref(''); // 签名相关状态 const signCanvas = ref(null); const ctx = ref(null); const deviceReady = ref(false); const signing = ref(false); const hasSign = ref(false); const signRawData = ref([]); let esp560Device = null; // 初始化画布 const initCanvas = () => { ctx.value = signCanvas.value.getContext('2d'); ctx.value.lineWidth = 2; ctx.value.lineCap = 'round'; ctx.value.strokeStyle = '#000'; }; // 加载考核信息 const loadExamInfo = async () => { const res = await axios.get(`/api/exam/info?examNo=${examNo.value}`); examType.value = res.data.data.examType; examContent.value = res.data.data.examContent; }; // 初始化ESP560设备 const initDevice = async () => { try { esp560Device = new HanvonESP560({ deviceType: 'ESP560', timeout: 5000, pluginPath: '/plugins/SignPlugin.dll' }); await esp560Device.connect(); deviceReady.value = true; ElMessage.success('ESP560签名屏初始化成功'); // 监听笔迹点事件 esp560Device.on('signPoint', (point) => { if (!signing.value) return; signRawData.value.push(point); ctx.value.lineTo(point.x, point.y); ctx.value.stroke(); hasSign.value = true; }); } catch (e) { ElMessage.error(`设备初始化失败：${e.message}`); } }; // 开始签名 const startSign = () => { esp560Device.startCollect(); signing.value = true; ctx.value.clearRect(0, 0, 800, 480); signRawData.value = []; hasSign.value = false; }; // 停止签名 const stopSign = () => { esp560Device.stopCollect(); signing.value = false; }; // 提交签名 const submitSign = async () => { try { await ElMessageBox.confirm('确认提交签名？提交后不可修改', '提示', { confirmButtonText: '确认', cancelButtonText: '取消' }); const res = await axios.post('/api/exam/sign/hanvon/collect', { examNo: examNo.value, userId: localStorage.getItem('userId'), signRawData: JSON.stringify(signRawData.value), deviceInfo: `ESP560-${esp560Device.getDeviceId()}`, ip: returnCitySN["cip"] }); ElMessage.success(`签名提交成功，记录ID：${res.data.data}`); // 跳转至考核列表 router.push('/exam/list'); } catch (e) { if (e !== 'cancel') ElMessage.error(`提交失败：${e.message}`); } }; // 生命周期 onMounted(() => { initCanvas(); loadExamInfo(); }); onUnmounted(() => { if (esp560Device) esp560Device.disconnect(); }); </script> <style scoped> .sign-container { margin-top: 20px; } .sign-canvas { border: 1px solid #ccc; border-radius: 4px; } .btn-group { margin-top: 10px; display: flex; gap: 10px; } .exam-info { line-height: 2; } </style>

（三）测试验证阶段

1. 测试类型与用例

2. 问题整改

• 建立问题台账，按 “严重程度” 分级整改（P0：阻断流程→优先整改，P1：体验问题→迭代优化）；
• 整改完成后回归测试，确保问题闭环。

（四）部署上线阶段

1. 生产环境部署

• 后端部署：通过 Jenkins 打包 SpringBoot 项目为 JAR 包，部署至 Tomcat / 容器化（Docker），配置数据库 / Redis 连接、国密密钥、汉王 SDK 路径；
• 前端部署：打包 Vue 项目为静态文件，部署至 Nginx，配置反向代理指向后端接口，开放 ESP560 插件访问权限；
• 设备部署：在考核点位的 Windows 终端安装 ESP560 驱动，配置浏览器白名单，测试设备连通性。

2. 用户培训

• 编写《考核签名系统操作手册》，涵盖 “设备连接、签名流程、常见问题排查”；
• 组织考核管理员、员工培训，实操演示 ESP560 使用方法，发放操作手册。

3. 上线验收

• 组织业务方、技术方验收，确认功能、性能、合规性达标；
• 输出上线验收报告，明确上线时间、运维联系人、故障响应流程。

（五）运维保障阶段

1. 日常运维

• 监控服务器资源（CPU、内存、磁盘）、接口响应时间、设备连接状态；
• 定期备份数据库（每日全量 + 增量备份），备份签名原始数据至灾备库；
• 收集用户反馈，迭代优化功能（如笔迹渲染优化、PDF 格式调整）。

2. 故障处理

四、合规与风险控制

1. 法律效力保障

• 签名前完成身份验证（工号 + 验证码 / 人脸），保留验证记录；
• 签名原始数据（坐标 + 压力 + 时间戳）加密存储，而非仅存储图片；
• 对接司法存证平台（可选），签名数据同步存证，支持司法溯源。

2. 数据安全

• 所有接口采用 HTTPS 传输，签名数据传输前加签（SM2）；
• 员工权限精细化控制（仅能查看 / 签名本人考核单）；
• 操作日志保留≥3 年，支持审计回溯。

3. 风险预案

• 设备故障：备用 ESP560 设备，支持临时切换为 Canvas 网页签名（无压感，仅应急）；
• 系统宕机：前端支持离线签名（数据暂存本地，联网后同步），后端部署双机热备。

五、项目交付物清单

1. 需求规格说明书、技术方案文档；
2. 项目源代码（后端 + 前端）、接口文档；
3. 环境配置文档、部署文档、用户操作手册；
4. 测试报告、问题整改清单、上线验收报告；
5. 运维手册、故障处理流程文档。

六、项目成本与资源

1. 人力成本

• 后端开发：1-2 人；
• 前端开发：1 人；
• 测试：1 人；
• 运维：1 人；
• 产品 / 项目经理：1 人。

2. 硬件成本

• 汉王 ESP560 签名屏（按考核点位配置）；
• Windows 终端（考核点位）；
• 服务器（CPU≥8 核，内存≥16G，磁盘≥500G）。

3. 软件成本

• 汉王 ESP560 SDK 授权（按需向汉王采购）；
• 数据库 / Redis 商业版（可选，也可使用开源版）；
• 司法存证平台服务费（可选）。

七、项目成功指标

1. 功能覆盖率：核心功能 100% 实现，满足考核签名全流程需求；
2. 设备连通率：ESP560 设备连接成功率≥99%；
3. 操作成功率：用户签名 / 核验 / 导出操作成功率≥99.5%；
4. 响应时间：接口平均响应时间 < 3s，PDF 导出 < 5s；
5. 用户满意度：培训后用户操作满意度≥90%。

该方案覆盖项目全生命周期，可直接落地实施，如需调整考核流程、扩展功能（如多终端适配、笔迹相似度比对），可按需迭代优化。