溫豐蔚 曾曉鈺 羅斌 韋通明 張亮

摘要：在汽車設(shè)計(jì)與改進(jìn)的過程中，使用數(shù)據(jù)來尋找驗(yàn)證問題是常用的手段，當(dāng)有數(shù)據(jù)導(dǎo)出需求時(shí)，傳統(tǒng)的導(dǎo)出方式為開發(fā)人員手動(dòng)編寫SQL，從數(shù)據(jù)庫拉取數(shù)據(jù)，此方式效率低且會產(chǎn)生不必要的溝通成本，將開發(fā)人員的時(shí)間消耗在簡單且繁雜的導(dǎo)出工作中。為了節(jié)約開發(fā)人員的時(shí)間，更為方便快捷地方式為廠家工程師提供車輛各項(xiàng)數(shù)據(jù)，文章設(shè)計(jì)了一種基于Vue的汽車數(shù)據(jù)導(dǎo)出平臺前端，平臺設(shè)計(jì)原則為讓每一個(gè)用戶都能夠自主完成數(shù)據(jù)導(dǎo)出，方便其更好地分析問題，解決問題。平臺具備優(yōu)秀的權(quán)限管理功能，讓各個(gè)區(qū)域的人員具有合適的導(dǎo)出權(quán)限，既方便數(shù)據(jù)導(dǎo)出，也在一定程度上防止了數(shù)據(jù)泄露。導(dǎo)出模塊有歷史記錄功能，方便用戶下載歷史導(dǎo)出數(shù)據(jù)，避免了導(dǎo)出任務(wù)重復(fù)創(chuàng)建，加快了導(dǎo)出速度。

關(guān)鍵詞：HTML5；Vue；導(dǎo)出

中圖法分類號：TP311文獻(xiàn)標(biāo)識碼：A

Front-end design and implementation of automobile data exportmanagement platform

WEN Fengwei，ZENXiaoyu，LUOBin，WEITongming，ZHANG Liang

（SAIC GM WulingAutomoblieCo.，Ltd.，Guangxi Laboratory of New Energy Automobile，

Guangxi Key Laboratory of Automobile Four New Features，Liuzhou，Guangxi 545007，China）

Abstract：In the process of automobile design and improvement， it is a common method to use data to find verification problems. When there is a need for data export，the traditional export method is for developers to manually write SQL to pull data from the database.This method is inefficient and will generate unnecessary communication costs consume developers' time in simple and complicated export work. In order to save the developer's time and provide the manufacturer's engineers with various vehicle data in a more convenient and quick way， this paper designs a front-end implementation of a Vue-based vehicle data export platform. The platform design principle is to enable each user to independently complete the data export requirements，so as to facilitate them to better analyze and solve problems.The platform has excellent rights management functions，allowing personnel in various areas to have appropriate export rights， which not only facilitates data export， but also prevents data leakage to a certain extent.The export module has the function of historical record，which is convenient for users to download historical export data，avoids the repeated creation of export tasks，and speeds up the export speed.

Key words： HTML5，Vue，export system

1 引言

近年來，汽車已經(jīng)成為日常生活不可或缺的交通工具，隨著車機(jī)數(shù)據(jù)采集與存儲技術(shù)的完善，車輛產(chǎn)生的數(shù)據(jù)越來越多，主機(jī)廠存儲了大量數(shù)據(jù)。如何利用這些數(shù)據(jù)，挖掘數(shù)據(jù)內(nèi)的隱藏價(jià)值，讓數(shù)據(jù)服務(wù)于用戶，使用其來輔助解決車輛的設(shè)計(jì)、生產(chǎn)和使用過程中產(chǎn)生的各種問題成為熱門研究方向。傳統(tǒng)編寫 SQL 導(dǎo)數(shù)據(jù)的方式已不足以支撐越來越多及越來越復(fù)雜的導(dǎo)出需求，要解決這些問題需要一個(gè)方便實(shí)用的數(shù)據(jù)導(dǎo)出平臺的支持。

2 導(dǎo)出平臺簡介

在導(dǎo)出平臺中，平臺管理者可以管理平臺用戶及進(jìn)行權(quán)限分配；平臺用戶根據(jù)自己的權(quán)限選擇需要導(dǎo)出的數(shù)據(jù)。

在導(dǎo)出平臺中，設(shè)有用戶管理、數(shù)據(jù)分組和數(shù)據(jù)導(dǎo)出三個(gè)模塊，如圖1所示。

（1）系統(tǒng)管理：此模塊可以添加、編輯用戶信息；創(chuàng)建角色及分配角色權(quán)限，在導(dǎo)出系統(tǒng)中每個(gè)用戶帳號可以擁有多個(gè)角色，每個(gè)角色對應(yīng)一系列權(quán)限。

（2）數(shù)據(jù)分組：此模塊可以將各個(gè)數(shù)據(jù)信號進(jìn)行分組歸類，方便識別、查找及管理。

（3）數(shù)據(jù)導(dǎo)出：此模塊為整個(gè)平臺的核心，用戶可以根據(jù)車輛 vin、數(shù)據(jù)時(shí)間范圍與信號內(nèi)容來導(dǎo)出需要的數(shù)據(jù)，并可以通過導(dǎo)出列表來查看歷史導(dǎo)出數(shù)據(jù)文件。

3 方案與架構(gòu)

3.1 架構(gòu)介紹

本文中報(bào)表系統(tǒng)前端以 Vue 為基礎(chǔ)框架，Vuex為狀態(tài)管理工具，Element 為基礎(chǔ)組件庫。

利用 Vue.js 漸進(jìn)式框架進(jìn)行組件化開發(fā)。Vue.js 是一個(gè)輕巧、高性能、可組件化的 MVVM 庫，也是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 Web 界面的庫，擁有非常容易上手的 API 。與其他大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。響應(yīng)式雙向數(shù)據(jù)綁定是 Vue.js 的一大核心，它采用數(shù)據(jù)劫持結(jié)合發(fā)布訂閱模式來完成數(shù)據(jù)綁定，其中的核心手段是通過Object.define Property（）方法來添加屬性的 setter 和 getter 方法，訂閱者將接收到數(shù)據(jù)發(fā)生變化的消息，開始執(zhí)行對應(yīng)的監(jiān)聽事件、回調(diào)事件[1]。Vuex為此專門為 Vue.js 設(shè)計(jì)了狀態(tài)管理庫，利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新，它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

Element 是一套采用 Vue 2.0作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫，它是由餓了么團(tuán)隊(duì)構(gòu)建和維護(hù)，其基于“一致”“反饋”“效率”“可控”四大設(shè)計(jì)原則，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓開發(fā)者更專注于頁面功能構(gòu)建。

3.2 系統(tǒng)管理模塊

如圖2所示，系統(tǒng)管理模塊主要分為兩部分，即用戶管理與角色管理。

在用戶管理中，管理員的主要工作是創(chuàng)建、編輯和停用/啟用用戶帳號；平臺管理員添加用戶時(shí)填寫賬號、密碼、姓名、郵箱以及手機(jī)號等信息即可，若需要時(shí)可以對用戶信息進(jìn)行修改及啟停用。

在角色管理中，主要包含的功能有增、刪、改、查角色。平臺管理員可以根據(jù)實(shí)際工作需要?jiǎng)?chuàng)建相應(yīng)數(shù)據(jù)導(dǎo)出角色，并給其分配相應(yīng)的數(shù)據(jù)分組，同時(shí)可以對已有的角色信息進(jìn)行修改，若角色不再使用時(shí)，刪除角色。

系統(tǒng)管理模塊工作流程為：先查詢需求者是否擁有平臺帳號，沒有帳號則先新建賬號；確認(rèn)帳號信息后，進(jìn)入角色管理部分查詢此需求是否有對應(yīng)角色，若無角色則創(chuàng)建對應(yīng)角色并分配角色數(shù)據(jù)分組；最后將需求角色分配給需求賬戶。

3.3 數(shù)據(jù)分組模塊

數(shù)據(jù)分組是一系列數(shù)據(jù)項(xiàng)的集合，其代表了導(dǎo)出數(shù)據(jù)項(xiàng)的基礎(chǔ)分類，方便管理員進(jìn)行導(dǎo)出數(shù)據(jù)的管理與授權(quán)。

如圖3所示，數(shù)據(jù)分組模塊由分組列表及專業(yè)區(qū)域授權(quán)組成[2]。

在分組列表中，可以根據(jù)分組名稱及車型來查詢相應(yīng)分組；若需要添加編輯分組，則需要填寫分組名稱及對應(yīng)車型。

在分組列表中點(diǎn)擊任一分組后，可以打其對應(yīng)的專用區(qū)域數(shù)據(jù)授權(quán)模塊。在此模塊中，使用復(fù)選框的方式來選擇分組所需的數(shù)據(jù)項(xiàng)。由于車輛的數(shù)據(jù)項(xiàng)過于龐雜，平臺提供了關(guān)鍵字，采用查看已選或者拼音首字母等方式控制數(shù)據(jù)項(xiàng)的展示，方便用戶更快找到其所需要的信號項(xiàng)。

3.4 數(shù)據(jù)導(dǎo)出模塊

如圖4所示，導(dǎo)出模塊分為導(dǎo)出信息確認(rèn)與導(dǎo)出列表兩部分。

導(dǎo)出信息的主要功能為使用各個(gè)過濾條件來確認(rèn)需要導(dǎo)出的數(shù)據(jù)。用戶可以輸入車輛的 vin 或上傳包含多個(gè) vin 信息的文件的方式來設(shè)定需要導(dǎo)出數(shù)據(jù)的車輛；然后，在日期時(shí)間選擇框確認(rèn)數(shù)據(jù)的時(shí)間范圍；接著，在字段選擇區(qū)域選擇要導(dǎo)出的字段，可選數(shù)據(jù)項(xiàng)字段已復(fù)選框形式展現(xiàn)，可通過輸入關(guān)鍵字或者選擇分組的方式過濾，亦可點(diǎn)選分組復(fù)選框直接選擇一個(gè)分組；最后，點(diǎn)擊創(chuàng)建導(dǎo)出任務(wù)按鈕，創(chuàng)建對應(yīng)的導(dǎo)出任務(wù)。

總之，用戶確認(rèn)需要導(dǎo)出數(shù)據(jù)的車輛、日期及數(shù)據(jù)項(xiàng)信息即可完成數(shù)據(jù)的導(dǎo)出工作。

當(dāng)用戶創(chuàng)建好導(dǎo)出任務(wù)后，可以在任務(wù)列表中查看導(dǎo)出文件的生成狀態(tài)，文件生成完畢則可以點(diǎn)擊按鈕導(dǎo)出。

導(dǎo)出功能實(shí)現(xiàn)方式為：導(dǎo)出接口請求前將其responseType設(shè)置為 blob ，當(dāng)文件流傳輸完成后，從響應(yīng)的 headers 中的content?disposition讀取出導(dǎo)出文件名，將文件名和響應(yīng)數(shù)據(jù)傳入Javascript File Download生成下載文件，完成日志導(dǎo)出。

3.5 導(dǎo)出模塊數(shù)據(jù)項(xiàng)展示優(yōu)化

數(shù)據(jù)導(dǎo)出功能是導(dǎo)出平臺的核心功能，當(dāng)數(shù)據(jù)導(dǎo)出頁面可導(dǎo)出項(xiàng)越來越多時(shí)，選擇或取消選擇復(fù)選框會造成頁面長時(shí)間卡頓。為提高平臺的使用體驗(yàn)，提高數(shù)據(jù)導(dǎo)出效率，本文采用虛擬列表來解決此問題。

虛擬列表實(shí)現(xiàn)的總體思路為：在頁面首屏加載時(shí)，只加載可視區(qū)域內(nèi)需要的列表項(xiàng)，當(dāng)發(fā)生滾動(dòng)時(shí)，通過動(dòng)態(tài)計(jì)算獲得可視區(qū)域內(nèi)的列表項(xiàng)，并將非可視區(qū)域內(nèi)存在的列表項(xiàng)刪除[3]。其具體實(shí)現(xiàn)方法為：（1）計(jì)算當(dāng)前可視區(qū)域的起始數(shù)據(jù)索引；（2）計(jì)算當(dāng)前可視區(qū)域的結(jié)束數(shù)據(jù)索引；（3）根據(jù)起始數(shù)據(jù)索引和結(jié)束數(shù)據(jù)索引計(jì)算獲得當(dāng)前可視區(qū)域的數(shù)據(jù)，并渲染到列表上；（4）計(jì)算出起始索引在整個(gè)列表中的偏移位置，并設(shè)置在相應(yīng)的 offset 屬性；（5）監(jiān)聽列表的 scroll 事件，獲取滾動(dòng)位置scrollTop；（6）由于滾動(dòng)后渲染區(qū)域與可視區(qū)域已發(fā)生偏移，通過scrollTop與列表項(xiàng)的高度求出偏移量；（7）使用偏移量重新設(shè)置 offset 屬性，將渲染區(qū)域偏移至可視區(qū)域中，重復(fù)步驟5～7。

4 結(jié)束語

本文主要為了解決由于車輛大數(shù)據(jù)技術(shù)發(fā)展，車輛數(shù)據(jù)快速增加，如何能夠?qū)?shù)據(jù)更為方便快捷地提供給數(shù)據(jù)應(yīng)用團(tuán)隊(duì)，以及如何更為方便獲取數(shù)據(jù)等問題，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)車輛數(shù)據(jù)導(dǎo)出平臺前端，實(shí)現(xiàn)以分組的方式進(jìn)行數(shù)據(jù)集成管理，以角色方式的用戶管理，實(shí)現(xiàn)車輛數(shù)據(jù)共享與導(dǎo)出。車輛數(shù)據(jù)導(dǎo)出平臺是車輛數(shù)據(jù)導(dǎo)出應(yīng)用驅(qū)動(dòng)下的產(chǎn)物，若只完成基礎(chǔ)的數(shù)據(jù)篩選與導(dǎo)出功能，平臺用戶拿到數(shù)據(jù)后還會做一些重復(fù)性的數(shù)據(jù)處理工作。為了更好地利用導(dǎo)出數(shù)據(jù)，平臺計(jì)劃提供數(shù)據(jù)轉(zhuǎn)換功能，讓重復(fù)數(shù)據(jù)轉(zhuǎn)換工作直接交給云端完成。并且，集成基礎(chǔ)報(bào)表導(dǎo)出功能，針對不同的車輛根據(jù)報(bào)表模版直接導(dǎo)出相應(yīng)報(bào)表，避免了報(bào)表的重復(fù)填寫和計(jì)算。

參考文獻(xiàn)：

[1] 張帥.智慧城市大數(shù)據(jù)可視化云平臺的設(shè)計(jì)與實(shí)現(xiàn)[D].沈陽：沈陽大學(xué)，2021.

[2] 賈慧慧.面向 Web 系統(tǒng)的數(shù)據(jù)導(dǎo)出模型的研究[ D].秦皇島：燕山大學(xué)，2018.

[3] 張鶴峰，特日根.基于虛擬 DOM 的空間數(shù)據(jù)列表渲染方法研究與實(shí)現(xiàn)[J].測繪與空間地理信息，2021，44（6）：19?22＋26.

作者簡介：

溫豐蔚（1989—），本科，助理工程師，研究方向：汽車大數(shù)據(jù)可視化開發(fā)。