基于HTML5+CSS智能制造管理系统的前端设计

科技创新导报2018 NO.10Science and Technology Innovation Herald信息科学DOI：10.16660/.1674-098X.2018.10.160基于HTML5+CSS智能制造管理系统的前端设计许希贤 杨保华

(常州机电职业技术学院 江苏常州 213164)摘 要：随着信息技术在各个领域应用的不断发展，实现“数字化、网络化、智能化”制造，是制造业发展的新趋势，也是新一轮科技革命和产业变革的核心所在。本文根据大备智能科技公司为众伦科技有限公司设计的刀具加工生产管理系统，通过分析、调查、修改，完成了一个基于HTML5+CSS的智能制造管理系统的前端设计。该管理系统旨在提高智能制造产业的生产效率，降低智能制造工作人员的管理难度，减轻数据统计的复杂程度。该管理系统有如下优点：防错、防呆、流程管控；提高生产设备效率，及时发送设备运行和生产进度情状、设备故障预警、维修情况及带料情况；改善品质追溯水平；提高生产物流水平。关键词：智能制造 前端 HTML5 CSS①中图分类号：TP39 文献标识码：A 文章编号：1674-098X(2018)04(a)-0160-03Abstract: With the continuous development of information technology in various fields, the realization of

"digitalization, networking and intellectualization" is the new trend of the development of manufacturing industry,

and also the core of the new round of technological revolution and industrial transformation. Based on the design

of cutting tool processing and production management system designed by great intelligence technology company

for Zhong Lun Technology Co., Ltd., a front-end design of intelligent manufacturing management system based

on HTML5+CSS is completed through analysis, investigation and modification. The management system aims to

improve the production efficiency of the intelligent manufacturing industry, reduce the management difficulty of

the intelligent manufacturing staff and reduce the complexity of the data statistics. The management system has the

following advantages: error proofing, staying idle, process control, improving production equipment efficiency, timely

sending equipment operation and production progress status, equipment failure early warning, maintenance and belt

feeding, improving quality traceability level and improving production logistics Words: Intelligent manufacturing; Front-end; HTML5; CSS现如今，时代的变迁将整个社会带入信息化时代。信息化与智能化成为整个社会关注的新方向。智能化时代正在一步步向我们走来，传统制造工业正面临着巨大变革，其智能转型是建设制造强国的关键，实现“数字化、网络化、智能化”制造，是制造业发展的新趋势，也是新一轮科技革命和产业变革的核心所在。德国目前正在推动的工业4.0和美国的赛博-物理系统技术（CPS），都提出了以互联网和大数据为手段，以知识为核心的智能制造[1-3]。中国于2015年也发布了工业化与信息化融合的“中国制造2025”，同样高度重视智能制造。利用智能制造进行传统制造业操作正是大趋势，当前中国智能制造产业尚处于初级发展期，因此智能制造管理系统的需求量必将越来越大。在互联网时代，浏览器几乎主宰着一切，而智能制造管理系统的前端开发决定着浏览器的内容展现形式。首先前端设计应具有美观、简洁等视觉效果，其次应考虑网页需要开发的功能从而实现该系统所提供的所有功能。在社会互联网、信息化的过程中，前端开发是从网页制作进化而来的，之前的网页全部都是静态网页，用户浏览网页也只是获取网页上一眼可见的信息，而如今，随着信息化的加强，网页浏览已不仅仅为提供信息而服务，现在的网页前端已经可以为用户提供更加有视觉冲击并且更加美观的效果。课题用Dreamweaver CC 2017软件开发HTML5前端，其中一个HTML页面可以引用多个CSS文件。HTML5是万维网的核心语言，HTML、CSS和JavaScript三项技术组合而成HTML5。由于HTML5可以进行跨平台的使用，意味着许多平台都可以使用该技术进行开发。其中，CSS扩展了丰富的文档样式外观，可以将样式定义于HTML元素的style属性中，也可将样式声明在一个专门的CSS文件中以供HTML页面引用，易于使用与修改。CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。为了实现页面的交互，1995年Java Script作为程①作者简介：许希贤(1996—),男，汉族,四川江油人，大专在读,研究方向:ICT班计算机网络技术。 杨保华(1977—),男，安徽淮北人，博士，副教授，研究方向:物联网、微波系统、高等职业教育。160科技创新导报

Science and Technology Innovation Herald

信息科学序设计的脚本语言被设计出来，通常是在HTML标签中使用，能够更加快速响应客户端的操作。Java Script具有直接对用户或客户输入做出响应的优点，它是动态的；Java

Script只依赖浏览器，与操作环境无关，它具有跨平台性的优点；Java Script可以在客户端完成用户名及密码的输入判断，从而减少交互时间，因此JavaScript为动态网页的制作提供了重要的帮助，作为一种脚本语言，JavaScript广泛应用于客户端。本文根据大备智能科技公司为众伦科技有限公司设计的刀具加工生产管理系统，完成了一个基于HTML5+CSS的智能制造管理系统的前端设计。2018 NO.10Science and Technology Innovation Herald科技创新导报1 网页结构HTML网页一般都由head、nav、main、foot等元素组成body这一最大元素。本课题每个HTML网页与其对应CSS文件名称皆一致。网页预览使用Firefox火狐浏览器。网页框架主要由三大部分组成，页面主要以淡蓝色为基调。如图1，页面的header部分由公司logo和公司名称组成左方部分，右方为顶部导航按钮。左侧为导航条，该导航条包含管理系统各页面链接按钮与友情提示，底部声明写出公司简称。2 主页设计主页的设计主要在于各个选项的排版。首先在网络中寻找符合题材的图片，将各个图片与文字排版并设置class为link方便统一调整设置，然后需要适当调整好宽度width与高度height以保持整个页面的美观，在设计主页时因其他页面未完成，所以随意添加一个字符替代链接，在其他页面完成后再到主页完成链接更改。主页CSS代码以float:left;将主体部分调整为向左浮动，调整宽度为width:33%;使得页面宽度为流动百分比值，从而可以使页面自适应各类大小的浏览器页面，其他代码则改变了字体与字号大小，调整了页面布局。主页内展示的跳转选项，如图2所示，增加的大图标给用户提供更便捷的观感。页面设计时需要考虑到各个浏览器浏览界面差别将版块宽度设置为百分比使得网页界面随浏览界面流动变化，主页以home命名。主页HTML文件中将页面主体部分利用div标签设定为class类，将各对应页面地址链接添加到对应图片文字后将文字图片设定为link。因每一个选项代码相同，如下代码以订单管理举例：

Science and Technology Innovation Herald161

科技创新导报2018 NO.10Science and Technology Innovation Herald部分功能模块界面如图4所示，有订单维护，订单列表，工艺蓝图导入，制造项目信息等等。以订单列表为例，通过灵活改变表格格式使其成为书图3 网页功能设计框架图(a)订单维护 (b)订单列表(c)工艺蓝图导入 (d)制造项目信息面格式展示。首先float:

图4 部分功能模块界面图left设置浮动属性向左浮动，由于表格从图形界面添加，需要键入list-style-type: none将默认文本属性清除，然后将列表的位置与宽度等调整后达到预期效果：font-size: 15px; margin-top: 5% !important; background-color: #F0F0F0;

padding: 5px;border: medium solid #FFFFFF; margin-bottom: 6%; margin-left: 21%;订单管理以order命名。整个页面布局主要使用float属性实现，插入图片将其与文字设置float使其两个为一组浮动。然后设置各项基础属性调整美观，按钮则与订单管理相同。3 测试网页前端的设计就是服务于浏览器，所以为使网页在不同浏览器中以不同比例的方式展现给人们，我们需要使用流动的界面来自适应浏览器的页面比例。通常使用的方法是将width宽度元素设置为百分比值，如此一来页面中框体的宽度便会等比例根据浏览页面而流动变化，从而不会162科技创新导报

Science and Technology Innovation Herald信息科学出现浏览问题使得网页展示出错。运用火狐浏览器测试后解决了诸多流动布局问题，在此之后将测试浏览器界面预览情况。本设计中主页依次链接了订单管理、生产管理、工艺管理、系统设置，添加链接后经测试无误。4 结语本文所设计的智能制造管理系统前端是大备智能科技公司为常州众伦科技有限公司设计的刀具加工生产管理系统的前端设计。该管理系统旨在提高智能制造产业的生产效率，降低智能制造工作人员的管理难度，减轻数据统计的复杂程度。该管理系统有如下优点。（1）防错、防呆、流程管控。通过工艺路线进行防错报警与记载；通过工单操作计时进行超时报警与记录；通过对流程管理进行错误报警与记录。（2）提高生产设备效率。及时发送设备运行和生产进度情状；实时发送设备故障预警、维修情况；实时预防原材料以及半成品带料问题。（3）改善品质追溯水平。支持对产品性能检测与结果分析；可追溯监控设备参数、工单、物料、测试记录等信息。（4）提高生产物流水平。为各部门之间沟通供给通畅的沟通平台。智能制造管理系统拥有的诸多功能，在前端的设计中就需要为该系统的各项功能设计各项按钮、链接。参考文献[1]李晓红.2020年智能制造市场规模有望超过3万亿[N].

中国经济时报，2016-07-10.[2]冯爱华.先进制造技术发展中的关键技术浅析[J].商场现代化,2013(8):114.[3]佚名.新时期制造业分享经济发展的思考[J].智慧工厂,

2017(2):30-31.[4]佚名.忆往昔,展未来[J].智慧工厂,2017(1):7-17.[5]晏辉.对石材业人工智能发展的建言[J].石材,2017(2):1-4.[6]黄峰达．全栈开发与应用-精益实践[M].北京：电子工业出版社,2017.