基于Web的無人機性能評測系統前端界面設計

徐小杰 余松威

摘? 要：科學全面地實現對無人機性能指標測評是解決阻礙我國無人機應用技術難以大規模推廣的重要途徑之一。為實現對無人機性能的快速了解，通過應用HTML、CSS、jQuery等前端知識設計了一個基于Web的無人機性能評測系統前端界面，主要基于用戶體驗進行了一系列前段界面的設計和實現;通過展示和對比各類型無人機的性能指標參數，可以基于指標評分和權重來綜合得出無人機性能的好壞，用戶可以清楚地評測出無人機是否符合用戶標準，具有指導性意義。

關鍵詞：無人機;性能評測系統;前端界面

Abstract：The scientific and comprehensive realization of UAV performance index evaluation is one of the important ways to solve the obstacles to the large-scale promotion of UAV application technology in my country. In order to realize the rapid understanding of UAV performance，a Web-based UAV performance evaluation system front-end interface is designed by applying HTML，CSS，jQuery and other front-end knowledge. A series of front-end interfaces are designed and implemented mainly based on user experience. By displaying and comparing the performance index parameters of various types of UAV，the performance of UAV can be comprehensively obtained based on index scores and weights. The user can clearly evaluate whether the UAV meets the users standard，which has guiding significance.

Keywords：UAV;performance evaluation system;front-end interface

0? 引? 言

在全世界范圍里，一些國家在20世紀初就開始對無人機進行研究。無人機最早主要應用于軍事領域，用于戰場監視、信息探查、戰斗等方面，后來無人機也被廣泛運用到民用領域，為救災、警用、農業植保、生活航拍等領域做出了重大貢獻[1，2]。由于對航空產品的嚴格管制和安全性能的嚴格要求，無人機在民用領域難以快速發展，不過在最近幾年，無人機行業的發展越來越迅速，民用無人機需求漸漸增加，無人機具有較好的發展前景[3]。

隨著無人機技術的不斷更新發展，無人機性能越來越高，實現的功能逐漸多樣化，且實用性顯著增強，但是無人機的研制成本也跟隨著技術的發展變得愈加昂貴，且無人機處在多變的自然環境中時容易損壞，進而給用戶帶來巨大的損失[4]。因此，人們逐漸開始重視無人機系統的安全性和整機運轉特性。閆云斌等針對無人機數據鏈系統抗干擾性能評估問題，研究了其評估指標及其測試方法，并設計了內場實驗方案，對提出的抗干擾性能指標進行了測試，驗證了測試指標的可測性和正確定[5]。馬颯颯等針對無人機飛行控制軟件的特點，基于覆蓋與故障注入的測試方法對無人機飛行控制軟件進行了可靠性測試及量化評估[6]。

雖然無人機評測方面的研究越來越多，但如今無人機評測存在著一些不足的問題，比如規劃不統一、功能多樣性差，標準化和通用性差[7]，這就促使無人機性能評測系統要有更加多樣化的性能參數收集的功能。在無人機開發階段，可以收集無人機外觀參數進行充分有效的評測和評估;在無人機飛行階段，可以對飛行性能、安全性能、整機運轉性能進行全面的功能性能評測;在飛行結束后，可以對無人機的壽命和保存時長進行評測[8，9]。筆者一直從事農用無人機的性能評測的研究和設計工作，因此，作者通過應用HTML、CSS、jQuery等前端技術設計了一個基于Web的無人機性能評測系統前端界面[10]，以為用戶提供一種可以用來快速有效地了解當前無人機的性能特性和詳細信息的系統，幫助用戶更快了解自己需要的無人機種類的各種性能參數信息和價格，讓用戶可以清楚地評測出無人機性能是否符合用戶標準，對用戶具有指導性意義。

1? 評測系統分析與構建

本系統的無人機指標體系由外觀特性、整機運轉特性、飛行性能、噴灑作業性能和安全性能這5個一級性能指標組成，其中包括了16個二級性能指標和36個三級性能指標。構建無人機性能指標體系的主要目的是為了給目前市場上的不同種類的無人機產品性能的評測和評估提供依據。

為了更方便地實現對目前市場上存在的各種多旋翼無人機進行性能指標測評，采用加權平均計算法和逐級計算法來對無人機的綜合性能進行評測;即對無人機的所有三級性能指標進行評分，根據三級性能指標的評測值及各項性能指標所對應的權重系數計算出所有二級性能指標的評測值;同理，所有一級性能指標的評測值是根據計算出的二級性能指標的評測值及各項性能指標所對應的權重系數計算出來的。最后再根據一級性能指標的評測值和權重系數計算出無人機的整體評測結果。

其中，F為無人機的整體評測值，A1、A2、……、Ax分別為無人機各項一級性能指標的評測值，a1、a2、……、ax分別為無人機各項一級性能指標所對應的權重系數;Bx1、Bx2、……、Bxy分別為無人機第x項一級指標下的二級性能指標的評測值，bx1、bx2、……、bxy分別為無人機二級性能指標相對應的權重系數;Cxy1、Cxy2、……、Cxyz分別為無人機第x項一級指標下的第y項二級指標下的三級性能指標的評測值，cxy1、cxy2、……、cxyz分別為無人機三級性能指標相對應的權重系數。

2? 系統設計與實現

2.1? 功能需求

根據評測系統前端界面的功能需求，該系統的前段界面主要包括以下功能：

（1）功能入口：展示登錄帳號、QQ微信登錄、搜索欄。

（2）導航欄：展示首頁、無人機、圖片、機型對比、報價、知識問答。

（3）底部欄：展示關于我們、意見反饋、測試服務、常見問題。

（4）登錄、注冊：可以通過手機、微信、QQ登錄，手機登錄需要用戶輸入密碼、填寫短信驗證碼和系統驗證碼才能成功登陸。用戶可以通過注冊新的手機號，然后設置密碼、輸入系統驗證碼和短信驗證碼來注冊新賬號。

（5）首頁：首頁頁面包括輪播廣告、無人機新聞、前十熱門文章等。

（6）無人機：無人機頁面可以通過無人機用途選擇、分類選擇和下拉無人機頁面這幾種方法來查找無人機機型。其中有熱門機型、固定翼無人機、多旋翼無人機、垂直起降翼無人機這幾種分類，可供用戶查看相關無人機。

（7）圖片：圖片頁面可直觀讓用戶查看無人機的型號、外觀和受歡迎熱度。

（8）機型對比：機型對比頁面可以讓用戶對比2～4個相同或者不同的無人機機型，對比無人機的基本信息、飛行參數、硬件參數和整機運轉參數，直觀地對比無人機的不同之處。

（9）報價：報價頁面可以讓用戶查看無人機的型號、價格和圖片外觀。

（10）知識問答：知識問答頁面可以讓用戶查看無人機新聞和熱門推薦文章，用戶可以在登錄后評論和收藏、點贊文章，給用戶提供交流功能。

（11）搜索欄：搜索頁面可以為用戶查詢想要的關于無人機的內容，同時會跳轉到新的搜索頁面。

2.2? 系統實現

2.2.1? 登錄注冊頁面

用戶開始可以通過個人手機號和密碼注冊個人用戶;在系統里登錄個人用戶可以瀏覽系統內的文章或者其他用戶發表的文章，可以評論、點贊、收藏、轉發文章。本系統的登錄功能僅是為了幫用戶獲取對知識問答的文章的評論、點贊、收藏、轉發權限。

2.2.2? 頁面導航欄

無人機性能評測系統的頁面導航欄有首頁、無人機、圖片、機型對比、報價、知識問答，功能欄有搜索欄、登錄入口，可以指導用戶進行相關的功能操作，如圖1所示。

2.2.3? 首頁頁面

無人機性能評測系統的首頁頁面主要是為用戶提供關于無人機的新聞趣事、推薦熱門文章，讓用戶了解更多的無人機用途和作用，這對于讓用戶了解無人機性能評測有更多的幫助。

2.2.4? 無人機瀏覽頁面

為了幫助用戶了解更多的無人機的用途和分類，還有無人機的基本信息和機型詳情，特意設計了無人機性能評測系統的無人機瀏覽頁面。其中無人機的基本信息描述了無人機的機型、品牌、產品名稱、機型材料、動力、價格等等。用戶可以通過無人機頁面的用途選擇和分類選擇，篩選出相關的無人機，同時也可以通過下拉頁面查找無人機的相應的分類，如圖2所示。其中無人機頁面分熱門機型、固定翼無人機、多旋翼無人機、垂直起降固定翼四個類型提供給用戶瀏覽。用戶點擊無人機的圖片或者型號可以查看具體的無人機信息，跳轉到機型頁面。

2.2.5? 機型頁面

本系統主要通過無人機機型頁面來介紹無人機頁面戰士的的無人機的機型信息，機型頁面可以返回到無人機頁面，以便用戶查看后可以返回無人機頁面。機型頁面有機型信息、參數信息、評測信息這三項功能。其中機型信息具體展示了無人機的圖片、價格、產品名稱、機型信息等，用戶可以查看這一款無人機的詳細信息，同時還有機型詳請圖片，以及可以直觀體現出這款無人機有什么優點的詳細說明;參數信息是展示外觀特性、飛行性能、安全性能、整機運轉特性這四個一級指標特性及二級指標特性、三級指標特性的參數;評測信息說明展示了無人機的圖片、價格、產品名稱、機型信息、用途等信息，同時也展示了指標特性的權重和得分，最后得出無人機的總評分和排名，如圖3所示。

2.2.6? 圖片頁面

無人機性能評測系統的圖片頁面主要是為用戶提供關于無人機的圖片信息以及熱門程度，可以讓用戶具體查看哪一款的無人機外形信息。通過無人機機型圖片可以使用戶方便直觀查看無人機外形，如圖4所示。

2.2.7? 機型對比頁面

無人機性能評測系統的機型頁面主要是為用戶提供關于不同無人機的基本信息、飛行參數、硬件信息以及整機運轉參數，可以讓用戶具體對比出不同的無人機的信息不同之處。其中無人機基本信息包括無人機產品名稱、品牌、型號、動力、價格、機身材料，如圖5所示。

2.2.8? 報價頁面

無人機性能評測系統的報價頁面主要是為用戶提供不同無人機的價格信息，可以讓用戶具體對比不同的無人機的價格，同時可以根據價位選擇不同的無人機，也可以點擊無人機圖片和型號查看無人機的具體信息，如圖6所示。

2.2.9? 知識問答頁面

無人機性能評測系統的知識問答頁面主要是為用戶提供關于無人機的知識了解和討論，可以讓用戶間通過討論更加了解無人機相關知識。只有在用戶注冊登錄后才具有與其他用戶交流的權限，同時還可以回復其他用戶的評論，點贊、轉發文章等等，還有熱門推薦文章提供給用戶瀏覽，如圖7所示。

2.2.10? 搜索頁面

無人機性能評測系統的搜索頁面主要是為了方便用戶查詢無人機的相關信息，用戶在搜索欄點擊搜索按鈕之后，可以跳轉到搜索頁面，搜索頁面有關于用戶輸入的關鍵字的各種信息。同時還有發表含有關鍵字信息的文章的相關用戶的頭像、名稱等信息，為用戶關注該文章作者提供便利，如圖8所示。

3? 結? 論

無人機技術的蓬勃發展，使無人機性能評測方面的問題成為急須人們攻克的重大問題，因此無人機的性能評測系統的開發尤其重要。本研究綜合考慮無人機的性能指標評測需求，從無人機指標體系的分析和構建入手，應用了HTML、CSS、jQuery等前端知識，設計了一個基于Web的無人機性能評測系統前端界面，主要基于界面首頁、無人機頁、機型頁、圖片頁、機型對比頁、報價頁、知識問答頁及搜索頁等進行了一系列的實現設計。通過使用該系統界面，用戶可以查看和對比各類型無人機的性能指標參數，從而可以清楚地評測出無人機性能是否符合用戶標準。

參考文獻：

[1] 張毅.遙控直升機在日本農業上的應用 [J].世界農業，1997（4）：49-50.

[2] 馮江.無人機技術在現代農業生產中的應用 [J].農業技術與裝備，2014（5）：26-28.

[3] 楊陸強，果霖，朱加繁，等.我國農用無人機發展概況與展望 [J].農機化研究，2017，39（8）：6-11.

[4] 李勇志，支曉棟，唐海龍，等.無人機遙感技術在農業中的發展與應用 [J].安徽農業科學，2015（25）：350-351+355.

[5] 閆云斌，田慶民，王永川，等.無人機數據鏈系統抗干擾性能評估指標及其測試方法 [J].計算機測量與控制，2015，23（12）：3925-3928+4220.

[6] 馬颯颯，陳自力，李冰.無人機飛控軟件測試技術研究 [J].無線電工程，2004（10）：32-34+54.

[7] 徐小杰，陳盛德，周志艷，等.植保無人機主要性能指標測評方法的分析與思考 [J].農機化研究，2018，40（12）：1-10.

[8] 呂曉林，朱文來.無人機可靠性評估方法研究 [J].宇航計測技術，2012，32（6）：77-79.

[9] 劉宇清.小型無人機綜合性能測試臺的設計與優化 [D].西安：西安建筑科技大學，2009.

[10] 儲久良.Web前端開發技術課程教學改革與實踐 [J].計算機教育，2014（14）：12-15.

作者簡介：徐小杰（1992—），女，漢族，湖北黃岡人，助教，碩士，研究方向：無人機性能測試;余松威（1995—），男，漢族，廣東廣州人，學士學位，研究方向：無人機性能評測系統研發。