基于Blazor实现的样品扫码比对管理系统

样品扫码比对管理系统是一个集PDA端和PC端协同工作的企业生产过程产品与样品比对的信息化系统,采用C#+Blazor框架进行开发。

1. 项目背景

  • 朋友公司应客户要求,生产的产品要与样品有比对动作,并且要保留记录。
  • 为方便QA人员操作,必须要用PDA扫码枪进行操作。

2. 功能需求

  • PC端需求
    • 可以录入和导入所有样品编号及库位,便于查找样品
    • 可以统计查询样品比对人员、时间及结果等记录
    • 超时或比对时间不足,需要微信和邮件通知管理人员
  • PDA端需求
    • 用PDA摄像头扫描工牌二维码直接登录
    • 可以查找样品位置和当前用户比对的记录
    • 使用PDA扫描器(按键扫描,非PDA摄像头)扫描样品码进行比对
    • 比对结束,要再次扫描样品码确认结束

3. 技术方案

根据上述需求,系统分为PC端管理系统和PDA端APP两部分组成。

  • PC端和PDA端共用一个网址入口,均采用Blazor进行开发
  • 使用PWA技术将系统安装到PC和PDA桌面
  • 数据库使用MySQL
  • 部署:使用阿里云ECS服务器
  • 安全:HTTPS + RBAC权限控制

4. 功能模块

1)PC端功能

样品信息

  • 样品信息,用于维护所有样品的编码及库位。

比对记录

  • 比对记录,用于查询所有比对样品的记录。

系统设置

  • 系统设置,用于设置PDA客户端ID,比对超时通知。

2)PDA端功能

登录界面

扫描工牌登录、扫描成功后直接进入比对页面。

扫码比对

扫码比对前,需要找到样品,可以点击【找样品】链接进入找样品页面查找样品位置,找到后点击【开始扫码比对】按钮,再按下扫描器的按键,扫码成功后进入比对进行中页面并开始计时。

查找样品

输入样品码前几位可下拉查询,选中后点击【搜索】按钮查找库位,找到库位上的样品,然后和产品进行比对。

样品比对

比对中会进行计时,如果比对时间未满足后台设置的时长,则不能结束,结束比对需要确认合格和不合格,不合格需要拍照,点击【比对结束】按钮,再按键扫一次样品码确认结束。

我的记录

用户可查询自己比对的全部记录。

5. 技术难点

本方案关键技术难点是PDA按键扫码和不要弹出软键盘的功能,由于是使用Web技术开发PDA扫码软件,无法使用原生的功能,需要使用js模拟键盘输入,监听keydown事件来实现功能。

下面是封装后的扫码Blazor组件示例:

razor 复制代码
<KScanner @ref="scanner" IsPDA OnScan="OnScanned" />

@code {
    private KScanner scanner;

    private async Task OnScanned(string text, string error)
    {
    }
}
相关推荐
Aevget5 天前
界面控件Telerik UI for Blazor 2025 Q3新版亮点 - 进一步提升AI集成功能
人工智能·ui·界面控件·blazor·telerik
微笑刺客D17 天前
腾讯云EdgeOne Pages托管Blazor Wasm
blazor
Jackson@ML1 个月前
用ASP.NET创建一个Blazer Web应用程序
前端·asp.net·blazor
CSharp精选营2 个月前
ASP.NET Core Blazor进阶1:高级组件开发
前端·.net core·blazor
刚子编程2 个月前
ASP.NET Core Blazor 核心功能一:Blazor依赖注入与状态管理指南
开发语言·.netcore·blazor
刚子编程2 个月前
ASP.NET Core Blazor 路由配置和导航
服务器·javascript·.netcore·blazor
程序设计实验室3 个月前
Blazor全栈是个陷阱
blazor
界面开发小八哥4 个月前
界面控件Telerik UI for Blazor 2025 Q2新版亮点 - AI集成全面增强
人工智能·ui·blazor·用户界面·telerik
SchuylerEX4 个月前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架