1、SOFTWARE2023软 件第 44 卷 第 1 期2023 年Vol.44,No.1作者简介：郄阳（1986）,男,天津人,本科,助理工程师,研究方向：广播电视技术。维修管理系统软件设计郄阳（天津市海河传媒广播电视有限责任公司，天津 300221）摘要：本文设计了一个基于 B/S 结构的维修管理系统,使用 SQLServer2008 来组建数据库存储数据,后端使用 ASP.NET 开发服务器端程序,前端使用 HTML 开发客户端程序,并通过 Bootstrap 插件美化前端界面,通过 Quagga 库实现手机端的一维码扫描,从而实现手机端扫码报修,通过 table2excel 插件实现多页
2、表单数据的 Excel 导出；同时,在文中还简述了Web 服务器端部署的方式和要点。关键词：维修管理；软件设计；一维码中图分类号：TN94 文献标识码：A DOI：10.3969/j.issn.1003-6970.2023.01.021本文著录格式：郄阳.维修管理系统软件设计J.软件,2023,44(01):081-084+097Software Design of Maintenance Management SystemQIE Yang（Tianjin Haihe Media Radio and Television Co.,Ltd.,Tianjin 300221）【Abstract】：W
3、e design a maintenance management system based on B/S structure,build a database to store data with SQLServer2008,and use ASP.NET to develop the server-side program,use HTML to develop the client-side program,beautify the website through the Bootstrap plug-in,realize the one-dimensional code scannin
4、g of the mobile phone through the Quagga library,thus realize the code scanning and repair request of the mobile phone,and realize the Excel export of multi page form data through the table2excel plug-in;At the same time,the paper also briefly describes the ways and key points of Web server deployme
5、nt.【Key words】：maintenance management;software design;one dimensional code设计研究与应用0 前言天津广播电视台租借室是一个前期拍摄设备领取的重要场所,设备借出归还十分频繁,因此,设备使用过程中出现一些问题,也需要值班人员及时的维修维护,确保转天拍摄的顺利进行。以前,所有维修统计都用纸单手动记录,时间长、不易统计,因此,应租借室值班员需求,开发一款电子维修统计和管理的软件程序,使值班员随时填写报修单、完成报修单,并提供相应的查询及导出功能,方便统计。1 设计目的和开发准备经过前期调研我们发现,软件系统应该涉及 3 个部分：
6、报修、维修和查询。其中,报修部分应该涉及设备的种类、类型、名称、故障点、维修完成标记和设备条码,维修部分仅需要更改维修完成标记即可,查询部分需要根据日期统计月、季度或年维修量。从以上需求分析,数据库的设计相对简单,省去多张表的联动查询,仅用一张表存储数据即可,省去数据重叠冗余,因此使用 SQL Server2008 数据库来存储绰绰有余。在结构选择方面,我们放弃复杂的 C/S 架构的软件设计,因为客户端/服务器模式需要额外安装软件,不方便于在不同机器上运行,而且在手机使用方面还要涉及 App 商店上架问题及授权问题,不方便在手机上推广使用,所以我们采取 B/S 架构1,浏览器/服务器模式可以在
7、任何电脑、任何操作系统上运行,便于软件推广使用。在开发软件方面,我们选择了 VS Studio 2010,使用A 语言开发后台服务器端程序,前端则使用 HTML语言+JavaScript 脚本来开发,一来可以兼容广阔的 JS库,实现多种功能；二来可以美化程序界面,缩短开发周期2。服务器端使用一台普通配置工作站,操作系统使用Server 2008,目的是使用 IIS 进行 Web 网页发布,同82软 件第 44 卷 第 1 期SOFTWARE时,Server 操作系统的机器比家庭版的更加稳定、高效。2 核心数据库设计根据前期的沟通交流,我们发现只需要设计一个表来存放维修数据就可以了,所以在数据库
8、中就不在做多表级联操作。这个维修的表中,应该含有的数据包括：设备类型（mtype）、设备名称（mname）、设备故障（merror）、设备报修时间（mdate）、维修标识（yon）、设备条码（msn）一共 6 项数据,所以使用如下语句构建数据库3：create table repairDevice(mtype varchar(10),/设备类型mname varchar(15),/设备名称merror varchar(30),/设备故障mdate datetime,/设备报修时间yon varchar(1)default n,/维修标识,缺省为 n（未维修）msn varchar(11),/设
9、备条码primary key(mname,mdate)/数据库联合主键)因为我们还需要给网页端程序设计一个登陆页面,所以还需要建一个人员表来存储相关数据,表中含有两列内容,姓名（name）,密码（psd）,故使用如下语句构建数据库：create table persons(name varchar(20)primary key,psd varchar(20),)3 登陆页面设计及后端交互登陆页面我们按照如图 1 所示的页面来设计,其中包含软件名称、背景及登陆所需的用户名密码两个 Input控件,一个登陆按钮控件,其中登陆按钮控件绑定后台交互事件,用于从后台数据库对比用户名密码是否符合。另外,由
10、于输入框可以被键入不同类型的字符,为了避免使用者使用注释符或数据库关键字等特殊符号修改数据库,需要对用户输入的内容进行正则表达式判定4,确保数据库安全。借助 vs2010 的强大功能,我们只需在Web.config 中,定义如下字符检测项：后台方面,收到前台发来的 form 指令后,在相关的 ASPX 文件中定义响应处理项5,连接数据库,通过如下语句,看数据库是否能查询出数据,有则判定登录成功,没有则返回重新登录并给出提示。select*from persons where name=+name+and psd=+pass+;/其中 name 和 pass 是从 form指令中带入的输入框中的
11、用户名和密码。至此,登录页面设计完毕,最后将界面美化,加入相关 CSS 文件,并调整颜色、大小、背景,完成首页设计。TJTV租借管理系统帐号密码登录background 图 1 登录页面设计Fig.1 Login page design4 报修页面设计及后端交互报修页面我们按照如图 2 所示的页面来设计,其中包含一组报修成功或失败的提示框,一个 Input 框加一个按钮来扫描设备条码,一组联动的 Select 框,来选择设备类型、设备名称和故障,一个提交按钮用于和后端数据库交互。联动部分的设置写在 JS 文件中,根据用户点击的设备类型名,显示出相对应的设备名称单选列表,再由此选出的设备名,显示
12、出相关的故障信息,因为联动关系我们没有设计数据库表单,所以直接在 JS文件中,根据 Select 的数值指定即可。扫描条码是一项特殊的功能,如果值班员用手机报修的话,通过手机摄像头扫描可以大幅提升报修的效率,缩短手动输入的时间,也能避免输入错误。在这里,我们直接选用免费插件 quagga.js 库来进行一维码的扫描和识别,天津台使用的条码是 code_128编码5,因此在设定 quagga 设置的时候,需要选择code_128 编码,并勾选 half_sample 提升识别效率,具体使用方法不在此赘述,有兴趣的读者可以阅读文献6。后台方面,当用户提交完所有的数据后,点击提交按钮,我们则发送一条
13、 post 指令到后台服务器端,服务器端根据 post 所携带的数据访问数据库,并进行插83郄阳：维修管理系统软件设计入操作。前端 post 指令写在 JS 文件中,格式如下：$.post(newPage.ashx,type:temText,/用户选择的设备类型name:temText2,/用户选择的设备名称 error:temText3,/用户选择的设备故障sn:temText4/用户写入的设备条码,function(el)if(el=插入成功)$(#showAlert).show();/在顶部显示成功提示$(#showAlert).fadeTo(2000,500).slideUp(500,
14、function()$(#showAlert).hide();/动画);else$(#showAlert2).show();/在顶部显示失败提示$(#showAlert2).fadeTo(2000,500).slideUp(500,function()$(#showAlert).hide();/动画););后台接到数据后,直接执行数据库插入操作：insert into repairDevice values(+type+,+name+,+error+,+dateNow+,+sn+)/其中,dateNow 是服务器端取到的当即时间如果成功返回,则执行提示动画,并将提交按钮设置成不可点击,持续 5
15、s,防止连续点击造成的误报。最后,我们对界面进行美化,使用 Bootstrap 插件,引入相关 JS 和 CSS 文件,在页面引用即可,完成后的页面如图 3 所示。TJTV维修恭喜您!报修成功!摄像机DVLCD屏排线接触不良,闪黑TJTVA013467设备类型设备名称故障类型设备条码扫描等待2S 图 3 报修页面美化Fig.3 Beautify the repair page5 统计页面及完成维修设计及后端交互统计页面需要设计一个查询条件,并通过数据库交互读出列表并进行分页显示。其中,包含两个 Input 日期选择框,一个载入按键,一个导出按键再加上 Table显示。载入按钮关联后台,设计消息
16、处理函数,接收来自此页面载入按钮的 post 消息,消息中含有起止日期,通过数据库对比截取所有数据项,返回给页面,具体SQL 语句为：select*from repairDevice where mdate=+time1+由于 Bootstrap Table 自带分页选项,所以我们通过设置 Bootstrap 参数就能实现分页显示的功能,具体写法可参阅官网文献。接收数据并显示到页面的 Table中键入如下代码：var total=content.length;var j=total/5;/表一共 5 列for(var t=0;tj-1;t+)var newTr=tb.insertRow(t+1);for(var i=0;i 5;i+)/添加一列 图 2 报修页面设计Fig.2 Repair page designbackground成功提示失败提示条码扫描设备类型设备名称故障类型提交与设备名称联动与设备类型联动灯光设备摄像机4G背包音频设备镜头配件84软 件第 44 卷 第 1 期SOFTWAREvar newTd=newTr.insertCell();newTd.innerHTML=
