基于“HTML5”的質(zhì)量過程控制APP的設(shè)計與實(shí)現(xiàn)

摘 要：隨著信息技術(shù)的發(fā)展，在“數(shù)字煙草”建設(shè)的大環(huán)境下，生產(chǎn)車間內(nèi)部的質(zhì)量問題反饋與追溯原來僅通過微信群或電話溝通，存在諸如網(wǎng)絡(luò)安全問題、質(zhì)量管控?zé)o法實(shí)現(xiàn)全流程監(jiān)管、質(zhì)量問題統(tǒng)計歸檔不便捷等問題?；谝陨蠁栴}與可行的技術(shù)手段，開發(fā)基于“HTML5”的質(zhì)量過程控制APP，用于提升車間內(nèi)部質(zhì)量管理水平，提高工作效率。質(zhì)量過程控制APP采用HTML5開發(fā)模式，實(shí)現(xiàn)了質(zhì)量問題預(yù)警、問題填報、統(tǒng)計分析功能。從上線運(yùn)行情況來看，開發(fā)完成的質(zhì)量過程控制APP能夠解決目前的問題，并對質(zhì)量管理工作形成閉環(huán)控制。

關(guān)鍵詞：HTML5；質(zhì)量過程控制；APP；質(zhì)量管理

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2024）17-0089-06

0 引 言

隨著信息技術(shù)的發(fā)展，煙草行業(yè)的信息化進(jìn)程正在加速進(jìn)行[1-2]。目前多品規(guī)、多機(jī)臺的生產(chǎn)模式下，產(chǎn)品質(zhì)量全流程監(jiān)管需求愈發(fā)高漲[3]。在“互聯(lián)網(wǎng)+煙草”建設(shè)的大環(huán)境下[4-5]，生產(chǎn)車間內(nèi)部的質(zhì)量管理也對信息化建設(shè)提出了新的期許。針對質(zhì)量管理的新需求，在對實(shí)際生產(chǎn)管理工作過程中的業(yè)務(wù)操作進(jìn)行研究后，結(jié)合工廠實(shí)際生產(chǎn)情況與數(shù)字化建設(shè)情況，發(fā)現(xiàn)當(dāng)前還存在以下問題：

1）質(zhì)量管理沒有統(tǒng)一的平臺和工具。

2）工廠內(nèi)質(zhì)量管理工作依賴微信群進(jìn)行溝通，圖片及信息在微信群內(nèi)傳輸，信息安全得不到保障，查找及統(tǒng)計分析不便捷。

3）缺乏對質(zhì)量問題處理及驗(yàn)證的全流程管控。

4）現(xiàn)場操作設(shè)備的人員沒有及時使用電腦進(jìn)行質(zhì)量問題填報的條件。

質(zhì)量管理是“在質(zhì)量方面指揮和控制組織的協(xié)調(diào)的活動”，也是車間針對生產(chǎn)產(chǎn)品的管控能力的體現(xiàn)。制絲、卷包是卷煙生產(chǎn)過程中的兩大重要環(huán)節(jié)，保證制絲、卷接設(shè)備平穩(wěn)運(yùn)行是提高生產(chǎn)效率和產(chǎn)品質(zhì)量的關(guān)鍵因素[6-7]，也是質(zhì)量控制的關(guān)鍵節(jié)點(diǎn)，需要重點(diǎn)進(jìn)行業(yè)務(wù)梳理。

針對以上問題，結(jié)合目前可行的技術(shù)手段，決定開發(fā)定制化的質(zhì)量過程控制APP，用于解決以上問題，實(shí)現(xiàn)高效的系統(tǒng)操作與流程反饋。

1 相關(guān)技術(shù)概述

HTML5是一種超文本標(biāo)記語言，使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，是一種構(gòu)建Web內(nèi)容的語言描述方式，是最新的HTML標(biāo)準(zhǔn)，無須額外的插件就能夠承載豐富的Web內(nèi)容，增強(qiáng)了Web網(wǎng)頁的表現(xiàn)性能，追加了本地數(shù)據(jù)庫并且在設(shè)計之初就充分考慮了其跨平臺性，并不需要一定運(yùn)行Windows、Mac OS X、Linux、Multics或者其他任何特定的操作系統(tǒng)，唯一需要的就是一個現(xiàn)代瀏覽器[8]。它擁有新的語義、圖形以及多媒體元素，提供的新元素和新的API簡化了Web應(yīng)用程序的搭建，是跨平臺的，可以在不同類型的硬件上運(yùn)行，如PC、平板、手機(jī)、電視機(jī)等[9]。

2 系統(tǒng)功能分析

PDCA循環(huán)是從美國質(zhì)量管理專家休哈特博士首先提出的PDS（Plan Do See）演化而來，后由戴明采納、改進(jìn)、宣傳，獲得普及，因而也稱為“戴明環(huán)”[10]，是全面質(zhì)量管理的循環(huán)工作程序，是質(zhì)量管理從初級向高級循環(huán)轉(zhuǎn)動的過程模式。

系統(tǒng)依托工業(yè)互聯(lián)網(wǎng)平臺，實(shí)現(xiàn)質(zhì)量問題的收集和錄入，依據(jù)級別推送與發(fā)起PDCA處理流程的移動應(yīng)用。現(xiàn)場操作人員使用手機(jī)上的質(zhì)量過程控制APP，對現(xiàn)場質(zhì)量問題進(jìn)行收集和拍照（或調(diào)取已拍攝的出現(xiàn)質(zhì)量問題的產(chǎn)品照片），根據(jù)標(biāo)準(zhǔn)判斷問題等級，再依據(jù)問題等級推送消息到相關(guān)人員，相關(guān)人員通過判斷問題原因并在手機(jī)上發(fā)起PDCA循環(huán)處理流程，并對處理結(jié)果進(jìn)行驗(yàn)收確認(rèn)，然后將數(shù)據(jù)傳給后臺，后臺保存質(zhì)量問題檔案及處理流程，形成經(jīng)驗(yàn)庫。針對一直未處理或處理結(jié)果不滿意的問題，可反復(fù)對同一個質(zhì)量問題發(fā)起流程。

2.1 組織機(jī)構(gòu)和角色

權(quán)限管理的主要目的是對不同的人能夠訪問的資源進(jìn)行權(quán)限的控制，避免因權(quán)限控制缺失或操作不當(dāng)引發(fā)的風(fēng)險問題，而角色起到了橋梁的作用，連接了用戶和權(quán)限的關(guān)系。通過現(xiàn)場考察與業(yè)務(wù)梳理，整理出不同的角色及其對應(yīng)的工作職能，主要分為現(xiàn)場操作人員和管理人員，具體如表1所示。

2.2 系統(tǒng)用例

由于軟件涉及功能較多，在不展現(xiàn)一個系統(tǒng)或子系統(tǒng)內(nèi)部結(jié)構(gòu)的情況下，對系統(tǒng)或子系統(tǒng)的某個連貫的功能單元進(jìn)行定義和描述，采用表格形式列出用例總表，所涉及的業(yè)務(wù)模塊主要分為用戶信息模塊以及質(zhì)量過程控制模塊，如表2所示。

2.3 業(yè)務(wù)流程

質(zhì)量過程控制APP的主要業(yè)務(wù)流程如圖1所示。

首先打開APP，在APP首頁上選擇系統(tǒng)提取數(shù)據(jù)自動分析，或者現(xiàn)場檢查人員檢查發(fā)現(xiàn)（手工填報）兩個按鈕，發(fā)起不同的表單流程。系統(tǒng)提取數(shù)據(jù)自動分析的流轉(zhuǎn)流程為：自動分析消息查看，通過自動分析的數(shù)據(jù)發(fā)起流程，立即處理，發(fā)起驗(yàn)證，確認(rèn)驗(yàn)證。

使用人員點(diǎn)擊系統(tǒng)提取數(shù)據(jù)自動分析進(jìn)入本功能模塊，本模塊主要是將MES系統(tǒng)內(nèi)采集的卷包綜合測試臺數(shù)據(jù)，以及制絲停機(jī)斷料信息進(jìn)行了提取展示，使用人員可以查看所有信息，并針對其中一條信息發(fā)起質(zhì)量問題處理流程。

點(diǎn)擊單條系統(tǒng)提取出來的數(shù)據(jù)，進(jìn)入問題填報頁面，根據(jù)判斷標(biāo)準(zhǔn)判斷問題的等級，并填寫是否需要繼續(xù)流轉(zhuǎn)，通過上一步自動分析發(fā)起，并確認(rèn)需要處理的流程，在發(fā)起人的消息中的待處理內(nèi)可以查看。當(dāng)前步驟中的問題名稱、審批編號、問題等級、問題描述、發(fā)現(xiàn)時間都由系統(tǒng)自動根據(jù)流程信息帶出，如有備注，可以填寫備注內(nèi)容，選擇是否需要繼續(xù)流轉(zhuǎn)，如果需要，選擇下一步環(huán)節(jié)處理人，點(diǎn)擊發(fā)送，在彈出框內(nèi)填寫意見，流程發(fā)到下一個人；如果不需要，點(diǎn)擊發(fā)送，流程提前結(jié)束。別人在立即處理階段發(fā)到自己賬號的流程，在消息中的待處理內(nèi)查看。

填寫好處理結(jié)果和處理方式后，選擇是否需要繼續(xù)流轉(zhuǎn)，如果需要流轉(zhuǎn)，選擇下一環(huán)節(jié)處理人也就是最終驗(yàn)證的人員（根據(jù)實(shí)際情況進(jìn)行選擇，一般為問題的發(fā)起人），點(diǎn)擊發(fā)送，發(fā)到確認(rèn)驗(yàn)證步驟。相關(guān)人員收到確認(rèn)驗(yàn)證待處理消息，需到現(xiàn)場確認(rèn)問題是否已處理，是否處理徹底，若處理結(jié)果符合要求，點(diǎn)擊發(fā)送，流程審批完成。若處理結(jié)果不符合要求，點(diǎn)擊駁回，發(fā)送到上一環(huán)節(jié)處理人，要求重新處理。

現(xiàn)場檢查人員檢查發(fā)現(xiàn)（手工填報）的流轉(zhuǎn)流程為：填寫現(xiàn)場發(fā)現(xiàn)的問題，是否需要處理，立即處理，發(fā)起驗(yàn)證，確認(rèn)驗(yàn)證。

使用人員在生產(chǎn)工作過程中，發(fā)現(xiàn)質(zhì)量問題，或其他影響質(zhì)量管控的問題或行為時，可點(diǎn)擊現(xiàn)場檢查人員檢查發(fā)現(xiàn)（手工填報）進(jìn)入質(zhì)量問題填寫界面，根據(jù)界面表單填寫對應(yīng)內(nèi)容，選擇下一環(huán)節(jié)處理人后啟動流程。檢查人員在生產(chǎn)現(xiàn)場發(fā)現(xiàn)的問題，也在質(zhì)量問題填寫頁面進(jìn)行填報。填寫表單中對應(yīng)內(nèi)容，選擇下一環(huán)節(jié)處理人（下一環(huán)節(jié)處理人判斷所發(fā)現(xiàn)問題是否需要處理），點(diǎn)擊啟動，發(fā)送到是否需要處理步驟。當(dāng)前用戶判斷問題等級，填寫備注，選擇是否需要繼續(xù)流轉(zhuǎn)。如果需要，選擇下一環(huán)節(jié)處理人，點(diǎn)擊發(fā)送繼續(xù)發(fā)到下一步；選擇不需要流程結(jié)束。通過上一步是否需要處理發(fā)起，并確認(rèn)需要繼續(xù)流轉(zhuǎn)的流程，在當(dāng)前用戶的消息中的待處理內(nèi)可以查看。

問題處理流程的流轉(zhuǎn)根據(jù)生產(chǎn)車間的不同，也有不同的步驟，根據(jù)生產(chǎn)車間班組管理的實(shí)際情況進(jìn)行配置。制絲車間分別由生產(chǎn)班和設(shè)備班對問題進(jìn)行確認(rèn)，并將處理結(jié)果送工藝質(zhì)量室進(jìn)行驗(yàn)證，驗(yàn)證不通過的，返回處理問題的班組，繼續(xù)進(jìn)行處理。卷包車間由生產(chǎn)班長判斷問題是否需要進(jìn)行設(shè)備處理，如果需要處理設(shè)備，流程流轉(zhuǎn)到機(jī)電修理班進(jìn)行設(shè)備調(diào)試、維修，如果不需要處理設(shè)備，則流轉(zhuǎn)到機(jī)臺人員、工藝員、質(zhì)量負(fù)責(zé)人對問題產(chǎn)品進(jìn)行追溯處理，并填報處理方式及處理情況，處理不徹底的，再次進(jìn)行質(zhì)量問題產(chǎn)品的追溯處理。

3 系統(tǒng)功能設(shè)計

3.1 系統(tǒng)架構(gòu)設(shè)計

質(zhì)量過程控制APP前端采用JQuery、Vue、Bootstrap框架，讓W(xué)eb頁面保留自身特點(diǎn)的同時，自動適應(yīng)移動閱讀的特點(diǎn)和需求，減少開發(fā)和維護(hù)成本[11]；此外，在開發(fā)過程中，采用集團(tuán)工業(yè)互聯(lián)網(wǎng)平臺提供的移動應(yīng)用開發(fā)工具包（JS-SDK），通過調(diào)用平臺及本地終端的各種原生能力，極大簡化應(yīng)用開發(fā)工作量，縮短了應(yīng)用開發(fā)周期。主要業(yè)務(wù)功能有數(shù)據(jù)錄入、數(shù)據(jù)分析、問題判斷、消息推送，質(zhì)量過程控制APP應(yīng)用總體架構(gòu)如圖2所示。

質(zhì)量過程控制APP應(yīng)用通過集團(tuán)工業(yè)互聯(lián)網(wǎng)平臺進(jìn)行應(yīng)用的創(chuàng)建及管理，應(yīng)用開發(fā)流程遵循集團(tuán)移動應(yīng)用平臺的開發(fā)模式。本次移動應(yīng)用采用了HTML5開發(fā)模式，創(chuàng)建流程如圖3所示。

3.2 系統(tǒng)功能性用例設(shè)計

系統(tǒng)功能具體又劃分為用戶信息業(yè)務(wù)、質(zhì)量過程控制業(yè)務(wù)兩大業(yè)務(wù)模塊。

3.2.1 用戶信息業(yè)務(wù)用例

用戶信息業(yè)務(wù)主要用于區(qū)分登錄用戶的角色信息，此外還能較為方便地維護(hù)用戶基礎(chǔ)信息，具體用例如表3所示。

3.2.2 質(zhì)量過程控制業(yè)務(wù)用例表

質(zhì)量控制過程業(yè)務(wù)是系統(tǒng)主要功能的實(shí)現(xiàn)，根據(jù)流程流轉(zhuǎn)的步驟，編制了質(zhì)量過程控制業(yè)務(wù)用例表，具體用例如表4所示。

4 頁面效果

APP主要功能界面設(shè)計包含首頁、消息、我的。

4.1 系統(tǒng)首頁

如圖4所示，在首頁上主要有兩個功能模塊：系統(tǒng)提取數(shù)據(jù)自動分析、現(xiàn)場檢查人員檢查發(fā)現(xiàn)。具體內(nèi)容如下：

1）系統(tǒng)提取數(shù)據(jù)自動分析。使用人員點(diǎn)擊系統(tǒng)提取數(shù)據(jù)自動分析進(jìn)入本功能模塊，本模塊主要是將系統(tǒng)內(nèi)采集的車間質(zhì)量控制相關(guān)信息進(jìn)行提取展示，使用人員可以查看所有信息，并針對其中一條異常信息發(fā)起質(zhì)量問題處理流程。

2）現(xiàn)場檢查人員檢查發(fā)現(xiàn)。使用人員在生產(chǎn)工作過程中，發(fā)現(xiàn)質(zhì)量問題或其他影響質(zhì)量管控JCTGDcQ7EfA0oKGF6JHQpQ==的問題或行為時，點(diǎn)擊本模塊進(jìn)入質(zhì)量問題填寫界面，根據(jù)界面表單填寫對應(yīng)內(nèi)容，選擇下一環(huán)節(jié)處理人后啟動流程。

4.2 消息頁面

消息頁面主要分為五個模塊：

1）已發(fā)起。打開消息界面，點(diǎn)擊已發(fā)起，可以查看在用戶本人賬號上發(fā)起的全部流程。點(diǎn)擊單條記錄，可以查看發(fā)起流程的詳細(xì)信息，以及相關(guān)審批記錄。

2）待處理。在待處理頁面中，可以查看當(dāng)前環(huán)節(jié)在用戶本人賬號的流程，需要進(jìn)行處理。點(diǎn)擊單條記錄，可以查看流程相關(guān)詳細(xì)信息，以及相關(guān)審批記錄，根據(jù)流程處理的各對應(yīng)環(huán)節(jié)，填寫表單內(nèi)容，選擇是否需要繼續(xù)流轉(zhuǎn)，如果需要繼續(xù)，選擇下一環(huán)節(jié)處理人，并發(fā)送到下一環(huán)節(jié)；如果不需要繼續(xù)流轉(zhuǎn)，點(diǎn)擊發(fā)送流程結(jié)束。

3）已處理。點(diǎn)擊已處理，可以查看在用戶本人賬號上已處理的全部流程。點(diǎn)擊單條記錄，可以查看對應(yīng)流程的詳細(xì)信息，以及相關(guān)審批記錄，如圖5所示。

4）抄送我。點(diǎn)擊抄送我，可以查看其他人發(fā)起或處理流程過程中抄送在用戶本人賬號上的全部流程。點(diǎn)擊單條記錄，可以查看對應(yīng)流程的詳細(xì)信息。

5）草稿箱。草稿箱內(nèi)可查看發(fā)起流程時，用戶臨時保存為草稿的表單內(nèi)容，并可以繼續(xù)填寫并發(fā)起流程。

4.3 我的頁面

我的界面主要包含3個功能模塊：

1）我的信息?？刹榭串?dāng)前登錄用戶信息。

2）導(dǎo)出審批記錄?？蓪?dǎo)出所有已發(fā)起流程的審批記錄表單。

3）統(tǒng)計分析。打開頁面可以看到應(yīng)用根據(jù)系統(tǒng)自動提取數(shù)據(jù)，以及現(xiàn)場檢查人員檢查發(fā)現(xiàn)后填寫并發(fā)起的流程，做了統(tǒng)計匯總，并根據(jù)不同類型繪制餅狀圖。首次打開，頁面僅加載當(dāng)天的數(shù)據(jù)，需要查看其他時段的數(shù)據(jù)，可以根據(jù)需要選擇對應(yīng)條件進(jìn)行查詢。下面表單以列表形式展示查詢出來的流程信息，用戶可以查看相關(guān)流程信息，并導(dǎo)出查詢出來的數(shù)據(jù)，如圖6所示。

5 結(jié) 論

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，越來越多的日常工作以移動應(yīng)用的模式出現(xiàn)，并運(yùn)用于生產(chǎn)生活的各個方面。打造簡單便捷、直觀友好的移動應(yīng)用，成為各行各業(yè)提高工作效率、提升管理能力的基礎(chǔ)。充分利用現(xiàn)有數(shù)據(jù)資源，將數(shù)據(jù)資源轉(zhuǎn)化為數(shù)據(jù)資產(chǎn)，提升數(shù)據(jù)資產(chǎn)應(yīng)用能力，運(yùn)用現(xiàn)有技術(shù)整合資源，優(yōu)化配置，構(gòu)建“數(shù)字煙草”新局面。

參考文獻(xiàn)：

[1] 馬新明，熊淑萍，楊娟.農(nóng)業(yè)信息技術(shù)在煙草生產(chǎn)中的應(yīng)用現(xiàn)狀及展望 [J].河南農(nóng)業(yè)大學(xué)學(xué)報，2003（2）：124-128.

[2] 張思榮.煙草企業(yè)的信息化與電子商務(wù) [J].煙草科技，2002（5）：14-15+42.

[3] 張根保，何楨，劉英.質(zhì)量管理與可靠性：第2版 [M].北京：中國科學(xué)技術(shù)出版社，2009.

[4] 張凱.基于“互聯(lián)網(wǎng)+”的煙草行業(yè)信息化管理平臺探討 [J].現(xiàn)代農(nóng)業(yè)科技，2019（4）：259-261.

[5] 蔡偉釗.互聯(lián)網(wǎng)時代下煙草商業(yè)企業(yè)開展卷煙網(wǎng)上營銷的探討 [J].現(xiàn)代商業(yè)，2022（18）：32-35.

[6] 張樹明.基于響應(yīng)式Web設(shè)計的網(wǎng)頁模板的設(shè)計與實(shí)現(xiàn) [J].計算機(jī)與現(xiàn)代化，2013（6）：125-127.

[7] 程道勝.淺談卷煙設(shè)備維修 [J].科技創(chuàng)新與應(yīng)用，2015（33）：150.

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

[9] 韓迎紅.基于HTML5技術(shù)的移動Web前端設(shè)計與開發(fā) [J].電子技術(shù)與軟件工程，2021（22）：55-57.

[10] 李艷.“PDCA”模式培養(yǎng)學(xué)科帶頭人研究：中國職協(xié)2013年度優(yōu)秀科研成果獲獎?wù)撐募褐袃?[C].北京：中國職工教育和職業(yè)培訓(xùn)協(xié)會，2013.

[11] 田紀(jì)民.貴陽卷煙廠設(shè)備維修管理系統(tǒng)的研究與分析 [D].昆明：云南大學(xué)，2015.

作者簡介：崔童謠（1994.02—），女，漢族，云南曲靖人，助理工程師，本科，研究方向：計算機(jī)科學(xué)與技術(shù)；李書明（1994.10—），男，漢族，云南文山人，工程師，本科，研究方向：信息管理與信息系統(tǒng)；楊衛(wèi)（1979.06—），男，漢族，云南曲靖人，技術(shù)員，研究方向：計算機(jī)應(yīng)軟件開發(fā)；萬然（2000.02—），女，漢族，云南曲靖人，工程師，本科，研究方向：信息管理與信息系統(tǒng)；范玉龍（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