摘 要

现如今,随着不断地引进各式各样先进的生产机床设备,我国重轻工业生产的流程管理技术有巨大的发展，现代数字仪表发展迅速，功能不断增强。普通而又过时的数字仪表一般只用于实地实时观察，查询或者记录、历史数据信息，存在重要的缺陷。当今，数字仪表正向着智能化、高可靠性、高精度、集成化发展。工程师们对数字仪表的用途、设计方法以及性能提出了更智能化的水准，如何实时观察并远程读取其中的数据？为了解决这一难题，基于HTML5的数字仪表系统有更为优秀的数据管理性能和更便捷的数据分析效率，为数字仪表开辟了崭新的路径。HTML5是当今时代的新起之秀，不仅仅在移动数据互联网中饱受支持，甚至在全部web领域中也很受欢迎。HTML5插件将减少支持动态图像生成、图像的重要性渲染、三维的动画、本地存储、网络视频和音频的播放，在跨文件传输和多线程的重要作用，也使Web应用程序在同一时间变得更加丰富多彩，也将使应用更有效的网站开发。
在本毕业设计中，我采用了RequireJS框架开发，前端采用bootstrap，echarts，服务器用tomcat7，整体页面清爽简洁易于操作。其难点在于RequireJS和bootstrap。实现以下基本功能：用户可以实现登录注册注销基本功能，以及进入首页查看数字仪表。并且可以在用户管理功能下，查看、修改、删除用户信息。在数据管理模块下，功能包括随机产生数据、数据信息的增加删除修改等操作。

关键词：数字仪表；HTML5；echarts；bootstrap；RequireJS

Digital instrument system based on HTML5

ABSTRACT

Nowadays, along with the continuously introduce all kinds of advanced machine tool equipment, heavy light industry production in China has a huge development of process management and technology, modern digital instrument development is rapid, function is growing. Common and outdated digital instruments are commonly used for real time observations, queries or records, historical data, and important defects. Today digital instruments are moving towards intelligence, high reliability, high accuracy and integration. How do engineers make more intelligent use of digital instruments, design methods and performance, and how to read them in real time and read them remotely? In order to solve this problem, based on the number of HTML 5 meter system has more excellent performance data management and data analysis of more convenient efficiency, opened up a new path for the digital instrument. HTML5 is a new show of The Times, not only in the mobile data network, but also in all web domains. HTML plugin will reduce support for dynamic image generation, the importance of image rendering, 3 d animation, local storage, network video and audio playback, across a file transfer and the important role of multithreading, also make Web applications become more rich and colorful, at the same time also will make the application more effective website development.

In this design, I developed the RequireJS framework, with the front end using bootstrap, echarts, and the server with Java, and the overall page was clean and easy to operate. The difficulty lies in RequireJS and bootstrap. Implement the following basic functions: the user can implement the login registration logout basic function, and the entry page view digital meter. And you can view, modify, and delete user information under user management. In the data management module, functions include random generation of data, increased deletion of data information, and so on.

Key words：Digital instrument；HTML5；echarts；bootstrap；RequireJS

目录

1 绪论 - 1 -

1.1 课题研究背景 - 1 -

1.2 国内外研究现状 - 1 -

1.3 选题的目的及意义 - 2 -

1.4 本文研究的主要内容 - 2 -

1.5 本文的组织结构 - 3 -

2 开发平台及相关技术简介 - 4 -

2.1 技术路线 - 4 -

2.2 MVC模型 - 4 -

2.3 RequireJS - 4 -

2.4 Echarts - 4 -

2.5 Bootstrap - 5 -

2.6 HTML5 - 5 -

3 系统需求分析 - 7 -

3.1 课题研究背景 - 7 -

3.2 系统需求分析 - 7 -

3.3 系统功能设计 - 7 -

3.4 数据库的设计 - 7 -

3.5 系统流程分析 - 8 -

4 系统的详细设计与实现 - 10 -

4.1 启动 - 10 -

4.2 界面的设计和功能 - 11 -

4.2.1 登录界面 - 11 -

4.2.2 首页界面 - 13 -

4.2.3 用户管理界面 - 19 -

4.2.4 数据管理模块 - 30 -

5 总结 - 43 -

致 谢 - 44 -

参考文献 - 45 -

1 绪论

1.1 课题研究背景

旧时的数字仪表是指手工自己测量数据，人工计算的基础上，随着测量数据的不断庞大以及测量内容的不断更新繁复，很容易产生误差和丢失数据等等一系列影响数据结果的潜在问题。考虑到目前国内数字仪表精度较低，稳定性不好等不足，本文主要致力于一种基于html5的数字仪表系统的设计，具有响应速度快、指示准确、图形设计灵活、可视性能好、集成化程度高、可靠性强、功耗低等优点的汽车全数字电子仪表综合信息显示系统，实现将测量数据通过仪表盘、波形图以及数字量化表示出来，以及实现数据的实时更新、增删改查。

1.2 国内外研究现状

纵观国内外仪表行业的发展，仪表样式多种多样，每种都有着其特定的使用范围，按不同的特点有不同的分类结果。按形状分，主要有台式仪表、钳形表、手持式数字多用表等；按功能分，主要有一般数字多用表、激光测距仪、计量校准仪、绝缘电阻测试仪、宽频带功率分析仪等；在国外，数字仪表正以惊人的速度向高精度、高速度、高智能化方面发展。尤其是一些欧美国家在这方面已经位居前例，从各个方面提高仪表的性能，如：数据处理，通讯速度以及功能的多样化、智能化等。具有代表性的产品有：美国 RACA-DANA公司的 9303 型超高电平表，利用微处理器消除电流流经电阻所产生的热噪声，测量电平可低达-77d B；法国 TE 电器公司生产的 TSX 系列可编程控制器，能够完成各种顺序控制、定位调速机床数控以及系统识别等功能；2006 年 6 月，美国国家仪器公司(National Instruments，简称 NI)最新推出 USB 总线的 M 系列数据采集(data acquisition，简称 DAQ)产品，这款外置 DAQ设备可提供高达 32 路模拟输入通道，并达到 1.25MS/s 数据采集速率，相比之前的产品，新设备将整机性能提高了 5倍，并为 USB 数据采集测量设立了一个全新的标准；2007 年初 Agilent 公司推出一种专门为制造商和教育机构设计的全新高性价比数字万用表，以帮助他们降低测试和测量设备的成本，Agilent 34405a 是可提供精确和快速测量的 5位半台式数字万用表，有众多测量功能和扩展的测量能力，如温度和电容测量，并配有内置的 USB 2.0 接口，Agilent 34405a 的主要功能和特性包括双显示能力，易于读出的 AC 和 DC 测量结果，0.025％直流精度和 120000 计数分辨率；美国惠普公司研制出了 HP3458A 型218 位数字万用表；最近，美国 FLUKE 公司生产的精密型万用电表– Fluke 8508A Reference Multi- meter，这款万用电表采用的是校正仪器用的计量级测量标准所制造，其分辨率达到八位半，具备高标准的性能，足以执行对其它传统型实验室专用仪表，如 Kelvin-Varley 分压器、零点探测器、电阻电桥、甚至是 PRT(白金电阻温度计)的校正。 国内仪表行业也有了较快的发展。国内的仪表厂商不断引进先进技术，努力开发具有较高性能的数字仪表。从开始两位、三位功能单一的电流表、电压表、欧姆表，发展到现在的分辨率为五位半甚至六位半的功能多样的高反应速度的数字仪表。其中，横河川仪公司生产的中高档压力/压差变送器年产量突破 7 万台，进入世界前 10 名；科学仪器方面，出现了上海精科，北京瑞利、博飞、普析，南京江光等一批有活力的公司；北京长征火箭技术有限公司在为长征火箭系列的服务中，研制出近 500 种传感器，这在国外也是少有的；北京航天中兴医疗公司研制出的 X光机，其照射强度只有现在平均水平的 1/20 对人体的影响极小；电子四十一所的微波毫米光波矢量网络分析仪使我国成为继美国后的第二个成功研制该仪器的国家。对计量测试仪器进行校准可以获知并提高其精度。仪器在使用过程中，通常会受到多种因素的影响，致使它的输入输出特性存在复杂的非线性关系，这势必会增加仪器的误差。目前已经有一些学者从事于这方面的研究，考虑到人工神经网络具有良好的非线性处理能力，较强的容错和联想能力，国内学者余向阳提出使用 BP 人工神经网络方法来校准仪器，减小了这方面的不利影响，提高了仪器的测量精度。目前国内从事于台式数字仪表设计的厂家已经不少，但是基本上还是处于技术相对落后，成本相对较高的情况。市场上也有一些精度较高的数字仪表，但是要么稳定性很差，要么价格极其昂贵。而且目前一般的数字仪表基本上都采用单片机进行设计，处理效率相对较低，稳定性较差，与国外同类产品有较大差距。目前数字仪表设计发展的重点就是学习日本、欧美先进仪表的优点，研究其设计方法，设计出在性能和稳定性等方面更好的产品。

1.3 选题的目的及意义

传统的仪表使用都是借助于人力实时实地去测量，这样的工作量在现今的社会会显得格外的庞大。并且在进行测量时往往需要实时测得某些量值，这些量一般为中间量，要得到我们所需的量还需经过繁杂的转换、计算等，这种情况下要得到实时结果，就需要进行应用软件的开发。所以，设计基于HTML5的数字仪表系统一定程度上为了减少人力和误差，通过精密的仪器准确而直接将数据反馈到电脑屏幕上。

1.4 本文研究的主要内容

本文主要讲述了，本次毕业设计基于HTML5的数字仪表系统的开发与完成。

通过大量阅读国内外相关文献，研究并实践了网上的很多demo，了解数字仪表的工作原理，目前的研究现状，总结出影响仪表精度和稳定性的主要因素，提出基于的基本构想，对数字仪表的设计进行研究和分析。

1.5 本文的组织结构

根据课题研究与开发的内容，本论文主要由以下几个部分构成：