汽車數據導出管理平臺前端設計與實現

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

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

關鍵詞：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 引言

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

2 導出平臺簡介

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

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

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

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

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

3 方案與架構

3.1 架構介紹

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

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

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

3.2 系統管理模塊

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

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

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

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

3.3 數據分組模塊

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

如圖3所示，數據分組模塊由分組列表及專業區域授權組成[2]。

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

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

3.4 數據導出模塊

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

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

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

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

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

3.5 導出模塊數據項展示優化

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

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

4 結束語

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

參考文獻：

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

[2] 賈慧慧.面向 Web 系統的數據導出模型的研究[ D].秦皇島：燕山大學，2018.

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

作者簡介：

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