汽車數(shù)據(jù)導出管理平臺前端設計與實現(xiàn)

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

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

關鍵詞：HTML5；Vue；導出

中圖法分類號：TP311文獻標識碼：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)成為日常生活不可或缺的交通工具，隨著車機數(shù)據(jù)采集與存儲技術的完善，車輛產(chǎn)生的數(shù)據(jù)越來越多，主機廠存儲了大量數(shù)據(jù)。如何利用這些數(shù)據(jù)，挖掘數(shù)據(jù)內(nèi)的隱藏價值，讓數(shù)據(jù)服務于用戶，使用其來輔助解決車輛的設計、生產(chǎn)和使用過程中產(chǎn)生的各種問題成為熱門研究方向。傳統(tǒng)編寫 SQL 導數(shù)據(jù)的方式已不足以支撐越來越多及越來越復雜的導出需求，要解決這些問題需要一個方便實用的數(shù)據(jù)導出平臺的支持。

2 導出平臺簡介

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

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

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

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

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

3 方案與架構

3.1 架構介紹

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

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

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

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

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

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

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

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

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

數(shù)據(jù)分組是一系列數(shù)據(jù)項的集合，其代表了導出數(shù)據(jù)項的基礎分類，方便管理員進行導出數(shù)據(jù)的管理與授權。

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

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

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

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

如圖4所示，導出模塊分為導出信息確認與導出列表兩部分。

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

總之，用戶確認需要導出數(shù)據(jù)的車輛、日期及數(shù)據(jù)項信息即可完成數(shù)據(jù)的導出工作。

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

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

3.5 導出模塊數(shù)據(jù)項展示優(yōu)化

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

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

4 結束語

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

參考文獻：

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

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

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

作者簡介：

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