基于“HTML5”的质量过程控制APP的设计与实现

摘 要：随着信息技术的发展，在“数字烟草”建设的大环境下，生产车间内部的质量问题反馈与追溯原来仅通过微信群或电话沟通，存在诸如网络安全问题、质量管控无法实现全流程监管、质量问题统计归档不便捷等问题。基于以上问题与可行的技术手段，开发基于“HTML5”的质量过程控制APP，用于提升车间内部质量管理水平，提高工作效率。质量过程控制APP采用HTML5开发模式，实现了质量问题预警、问题填报、统计分析功能。从上线运行情况来看，开发完成的质量过程控制APP能够解决目前的问题，并对质量管理工作形成闭环控制。

关键词：HTML5；质量过程控制；APP；质量管理

中图分类号：TP311 文献标识码：A 文章编号：2096-4706（2024）17-0089-06

0 引 言

随着信息技术的发展，烟草行业的信息化进程正在加速进行[1-2]。目前多品规、多机台的生产模式下，产品质量全流程监管需求愈发高涨[3]。在“互联网+烟草”建设的大环境下[4-5]，生产车间内部的质量管理也对信息化建设提出了新的期许。针对质量管理的新需求，在对实际生产管理工作过程中的业务操作进行研究后，结合工厂实际生产情况与数字化建设情况，发现当前还存在以下问题：

1）质量管理没有统一的平台和工具。

2）工厂内质量管理工作依赖微信群进行沟通，图片及信息在微信群内传输，信息安全得不到保障，查找及统计分析不便捷。

3）缺乏对质量问题处理及验证的全流程管控。

4）现场操作设备的人员没有及时使用电脑进行质量问题填报的条件。

质量管理是“在质量方面指挥和控制组织的协调的活动”，也是车间针对生产产品的管控能力的体现。制丝、卷包是卷烟生产过程中的两大重要环节，保证制丝、卷接设备平稳运行是提高生产效率和产品质量的关键因素[6-7]，也是质量控制的关键节点，需要重点进行业务梳理。

针对以上问题，结合目前可行的技术手段，决定开发定制化的质量过程控制APP，用于解决以上问题，实现高效的系统操作与流程反馈。

1 相关技术概述

HTML5是一种超文本标记语言，使用标记标签来描述网页，是一种构建Web内容的语言描述方式，是最新的HTML标准，无须额外的插件就能够承载丰富的Web内容，增强了Web网页的表现性能，追加了本地数据库并且在设计之初就充分考虑了其跨平台性，并不需要一定运行Windows、Mac OS X、Linux、Multics或者其他任何特定的操作系统，唯一需要的就是一个现代浏览器[8]。它拥有新的语义、图形以及多媒体元素，提供的新元素和新的API简化了Web应用程序的搭建，是跨平台的，可以在不同类型的硬件上运行，如PC、平板、手机、电视机等[9]。

2 系统功能分析

PDCA循环是从美国质量管理专家休哈特博士首先提出的PDS（Plan Do See）演化而来，后由戴明采纳、改进、宣传，获得普及，因而也称为“戴明环”[10]，是全面质量管理的循环工作程序，是质量管理从初级向高级循环转动的过程模式。

系统依托工业互联网平台，实现质量问题的收集和录入，依据级别推送与发起PDCA处理流程的移动应用。现场操作人员使用手机上的质量过程控制APP，对现场质量问题进行收集和拍照（或调取已拍摄的出现质量问题的产品照片），根据标准判断问题等级，再依据问题等级推送消息到相关人员，相关人员通过判断问题原因并在手机上发起PDCA循环处理流程，并对处理结果进行验收确认，然后将数据传给后台，后台保存质量问题档案及处理流程，形成经验库。针对一直未处理或处理结果不满意的问题，可反复对同一个质量问题发起流程。

2.1 组织机构和角色

权限管理的主要目的是对不同的人能够访问的资源进行权限的控制，避免因权限控制缺失或操作不当引发的风险问题，而角色起到了桥梁的作用，连接了用户和权限的关系。通过现场考察与业务梳理，整理出不同的角色及其对应的工作职能，主要分为现场操作人员和管理人员，具体如表1所示。

2.2 系统用例

由于软件涉及功能较多，在不展现一个系统或子系统内部结构的情况下，对系统或子系统的某个连贯的功能单元进行定义和描述，采用表格形式列出用例总表，所涉及的业务模块主要分为用户信息模块以及质量过程控制模块，如表2所示。

2.3 业务流程

质量过程控制APP的主要业务流程如图1所示。

首先打开APP，在APP首页上选择系统提取数据自动分析，或者现场检查人员检查发现（手工填报）两个按钮，发起不同的表单流程。系统提取数据自动分析的流转流程为：自动分析消息查看，通过自动分析的数据发起流程，立即处理，发起验证，确认验证。

使用人员点击系统提取数据自动分析进入本功能模块，本模块主要是将MES系统内采集的卷包综合测试台数据，以及制丝停机断料信息进行了提取展示，使用人员可以查看所有信息，并针对其中一条信息发起质量问题处理流程。

点击单条系统提取出来的数据，进入问题填报页面，根据判断标准判断问题的等级，并填写是否需要继续流转，通过上一步自动分析发起，并确认需要处理的流程，在发起人的消息中的待处理内可以查看。当前步骤中的问题名称、审批编号、问题等级、问题描述、发现时间都由系统自动根据流程信息带出，如有备注，可以填写备注内容，选择是否需要继续流转，如果需要，选择下一步环节处理人，点击发送，在弹出框内填写意见，流程发到下一个人；如果不需要，点击发送，流程提前结束。别人在立即处理阶段发到自己账号的流程，在消息中的待处理内查看。

填写好处理结果和处理方式后，选择是否需要继续流转，如果需要流转，选择下一环节处理人也就是最终验证的人员（根据实际情况进行选择，一般为问题的发起人），点击发送，发到确认验证步骤。相关人员收到确认验证待处理消息，需到现场确认问题是否已处理，是否处理彻底，若处理结果符合要求，点击发送，流程审批完成。若处理结果不符合要求，点击驳回，发送到上一环节处理人，要求重新处理。

现场检查人员检查发现（手工填报）的流转流程为：填写现场发现的问题，是否需要处理，立即处理，发起验证，确认验证。

使用人员在生产工作过程中，发现质量问题，或其他影响质量管控的问题或行为时，可点击现场检查人员检查发现（手工填报）进入质量问题填写界面，根据界面表单填写对应内容，选择下一环节处理人后启动流程。检查人员在生产现场发现的问题，也在质量问题填写页面进行填报。填写表单中对应内容，选择下一环节处理人（下一环节处理人判断所发现问题是否需要处理），点击启动，发送到是否需要处理步骤。当前用户判断问题等级，填写备注，选择是否需要继续流转。如果需要，选择下一环节处理人，点击发送继续发到下一步；选择不需要流程结束。通过上一步是否需要处理发起，并确认需要继续流转的流程，在当前用户的消息中的待处理内可以查看。

问题处理流程的流转根据生产车间的不同，也有不同的步骤，根据生产车间班组管理的实际情况进行配置。制丝车间分别由生产班和设备班对问题进行确认，并将处理结果送工艺质量室进行验证，验证不通过的，返回处理问题的班组，继续进行处理。卷包车间由生产班长判断问题是否需要进行设备处理，如果需要处理设备，流程流转到机电修理班进行设备调试、维修，如果不需要处理设备，则流转到机台人员、工艺员、质量负责人对问题产品进行追溯处理，并填报处理方式及处理情况，处理不彻底的，再次进行质量问题产品的追溯处理。

3 系统功能设计

3.1 系统架构设计

质量过程控制APP前端采用JQuery、Vue、Bootstrap框架，让Web页面保留自身特点的同时，自动适应移动阅读的特点和需求，减少开发和维护成本[11]；此外，在开发过程中，采用集团工业互联网平台提供的移动应用开发工具包（JS-SDK），通过调用平台及本地终端的各种原生能力，极大简化应用开发工作量，缩短了应用开发周期。主要业务功能有数据录入、数据分析、问题判断、消息推送，质量过程控制APP应用总体架构如图2所示。

质量过程控制APP应用通过集团工业互联网平台进行应用的创建及管理，应用开发流程遵循集团移动应用平台的开发模式。本次移动应用采用了HTML5开发模式，创建流程如图3所示。

3.2 系统功能性用例设计

系统功能具体又划分为用户信息业务、质量过程控制业务两大业务模块。

3.2.1 用户信息业务用例

用户信息业务主要用于区分登录用户的角色信息，此外还能较为方便地维护用户基础信息，具体用例如表3所示。

3.2.2 质量过程控制业务用例表

质量控制过程业务是系统主要功能的实现，根据流程流转的步骤，编制了质量过程控制业务用例表，具体用例如表4所示。

4 页面效果

APP主要功能界面设计包含首页、消息、我的。

4.1 系统首页

如图4所示，在首页上主要有两个功能模块：系统提取数据自动分析、现场检查人员检查发现。具体内容如下：

1）系统提取数据自动分析。使用人员点击系统提取数据自动分析进入本功能模块，本模块主要是将系统内采集的车间质量控制相关信息进行提取展示，使用人员可以查看所有信息，并针对其中一条异常信息发起质量问题处理流程。

2）现场检查人员检查发现。使用人员在生产工作过程中，发现质量问题或其他影响质量管控JCTGDcQ7EfA0oKGF6JHQpQ==的问题或行为时，点击本模块进入质量问题填写界面，根据界面表单填写对应内容，选择下一环节处理人后启动流程。

4.2 消息页面

消息页面主要分为五个模块：

1）已发起。打开消息界面，点击已发起，可以查看在用户本人账号上发起的全部流程。点击单条记录，可以查看发起流程的详细信息，以及相关审批记录。

2）待处理。在待处理页面中，可以查看当前环节在用户本人账号的流程，需要进行处理。点击单条记录，可以查看流程相关详细信息，以及相关审批记录，根据流程处理的各对应环节，填写表单内容，选择是否需要继续流转，如果需要继续，选择下一环节处理人，并发送到下一环节；如果不需要继续流转，点击发送流程结束。

3）已处理。点击已处理，可以查看在用户本人账号上已处理的全部流程。点击单条记录，可以查看对应流程的详细信息，以及相关审批记录，如图5所示。

4）抄送我。点击抄送我，可以查看其他人发起或处理流程过程中抄送在用户本人账号上的全部流程。点击单条记录，可以查看对应流程的详细信息。

5）草稿箱。草稿箱内可查看发起流程时，用户临时保存为草稿的表单内容，并可以继续填写并发起流程。

4.3 我的页面

我的界面主要包含3个功能模块：

1）我的信息。可查看当前登录用户信息。

2）导出审批记录。可导出所有已发起流程的审批记录表单。

3）统计分析。打开页面可以看到应用根据系统自动提取数据，以及现场检查人员检查发现后填写并发起的流程，做了统计汇总，并根据不同类型绘制饼状图。首次打开，页面仅加载当天的数据，需要查看其他时段的数据，可以根据需要选择对应条件进行查询。下面表单以列表形式展示查询出来的流程信息，用户可以查看相关流程信息，并导出查询出来的数据，如图6所示。

5 结 论

随着互联网技术的发展，越来越多的日常工作以移动应用的模式出现，并运用于生产生活的各个方面。打造简单便捷、直观友好的移动应用，成为各行各业提高工作效率、提升管理能力的基础。充分利用现有数据资源，将数据资源转化为数据资产，提升数据资产应用能力，运用现有技术整合资源，优化配置，构建“数字烟草”新局面。

参考文献：

[1] 马新明，熊淑萍，杨娟.农业信息技术在烟草生产中的应用现状及展望 [J].河南农业大学学报，2003（2）：124-128.

[2] 张思荣.烟草企业的信息化与电子商务 [J].烟草科技，2002（5）：14-15+42.

[3] 张根保，何桢，刘英.质量管理与可靠性：第2版 [M].北京：中国科学技术出版社，2009.

[4] 张凯.基于“互联网+”的烟草行业信息化管理平台探讨 [J].现代农业科技，2019（4）：259-261.

[5] 蔡伟钊.互联网时代下烟草商业企业开展卷烟网上营销的探讨 [J].现代商业，2022（18）：32-35.

[6] 张树明.基于响应式Web设计的网页模板的设计与实现 [J].计算机与现代化，2013（6）：125-127.

[7] 程道胜.浅谈卷烟设备维修 [J].科技创新与应用，2015（33）：150.

[8] PILGRIM M. HTML5： Up and Running [M].Sebastopol： O'Reilly Media，Inc.，2010.

[9] 韩迎红.基于HTML5技术的移动Web前端设计与开发 [J].电子技术与软件工程，2021（22）：55-57.

[10] 李艳.“PDCA”模式培养学科带头人研究：中国职协2013年度优秀科研成果获奖论文集：中册 [C].北京：中国职工教育和职业培训协会，2013.

[11] 田纪民.贵阳卷烟厂设备维修管理系统的研究与分析 [D].昆明：云南大学，2015.

作者简介：崔童谣（1994.02—），女，汉族，云南曲靖人，助理工程师，本科，研究方向：计算机科学与技术；李书明（1994.10—），男，汉族，云南文山人，工程师，本科，研究方向：信息管理与信息系统；杨卫（1979.06—），男，汉族，云南曲靖人，技术员，研究方向：计算机应软件开发；万然（2000.02—），女，汉族，云南曲靖人，工程师，本科，研究方向：信息管理与信息系统；范玉龙（1988.11—），男，汉族，云南会泽人，工程师，本科，研究方向：电子信息工程。

DOI：10.19850/j.cnki.2096-4706.2024.17.017

收稿日期：2023-09-12

Design and Implementation of Quality Process Control APP Based on“HTML5”

CUI Tongyao， LI Shuming， YANG Wei， WAN Ran， FAN Yulong

（Hongyun Honghe Tobacco （Group） Huize Cigarette Factory， Qujing 654200， China）

Abstract： With the development of information technology， under the environment of “digital tobacco” construction， the feedback and traceability of quality problems in the workshop are originally only communicated through WeChat groups or telephones， and there are many problems such as network security problems， quality control cannot achieve whole-process supervision， and statistical archiving of quality problems is not convenient. Based on the above problems and feasible technical means， the quality process control APP based on “HTML5” is developed to improve the internal quality management level of the workshop and improve work efficiency. The quality process control APP adopts HTML5 development mode to realize the functions of quality problem early warning， problem filling and statistical analysis. From the perspective of online operation situation， the developed quality process control APP can solve the current problems and form a closed-loop control of quality management work.

Keywords： HTML5; quality process control; APP; quality management