數(shù)字可視化無人機運維系統(tǒng)建設

數(shù)據(jù)可視化概念

數(shù)據(jù)可視化是指大量、相對復雜的數(shù)據(jù)以表格、圖形等形式被映射到界面，更形象地表達數(shù)據(jù)的內在信息和規(guī)律，以便人員快速識別數(shù)據(jù)趨勢和異常值等內容。在互聯(lián)網(wǎng)新技術的支持下，可視化數(shù)據(jù)不僅具有可視功能，還具有互動功能。

數(shù)字可視化技術

數(shù)字可視化技術主要包括HTML5標準、ECharts組件、Vue框架。數(shù)字可視化系統(tǒng)開發(fā)基于web瀏覽器技術，采用B/S網(wǎng)絡架構和關系型數(shù)據(jù)庫。原生基礎架構開發(fā)使用HTML、JavaScript、CSS等語言，Vue、MyBatis等框架。可視化圖表制作使用ECharts或Highcharts等組件。動畫效果制作使用Unity、Blender、AE等軟件。

HTML5標準

HTML5是新一代HTML標準，增加了圖形效果顯示和媒介回放元素，進一步增強了HTML標記語義，能更好地支持本地離線存儲，大幅加強調層疊樣式表（CSS3）與JavaScript語言的結合能力，使頁面布局更清晰、特效更豐富、展示更美觀、適配更簡單。

ECharts組件

ECharts組件是一種開源化JavaScript語言庫，其底層依賴輕量級Canvas庫的ZRender組件。它能創(chuàng)建交互式可視化圖表，提供豐富的功能和配置選項，完成高度個性化定制的可視化圖表繪制。ECharts組件不僅具有數(shù)據(jù)分析和圖表繪制功能，而且具備豐富的交互功能，可以實現(xiàn)圖表縮放、平移、選擇、聯(lián)動等操作。

Vue框架

Vue框架是一種可創(chuàng)建用戶界面的JavaScript語言框架。它基于HTML，CSS、JavaScript語言構建而成，并提供一套聲明式、組件化編程模型，幫助業(yè)務人員高效地開發(fā)用戶界面。

數(shù)字可視化解決方案設計流程

數(shù)字可視化解決方案通常以展示大屏為載體，利用大屏展示信息多、可供多人觀看的特點，為公司或團隊決策提供信息依據(jù)。其應用包括業(yè)務數(shù)據(jù)分析、任務完成率監(jiān)測、工作進度預測等多種場景。

數(shù)字可視化解決方案的核心價值是為業(yè)務提供可視化信息。因此，其設計流程應以業(yè)務為中心，排版、布局、圖表等元素選用應滿足業(yè)務需求。在設計初期，技術人員應確定方案應表達的業(yè)務場景、關鍵指標；根據(jù)展示界面的要求，確定展示界面的尺寸、色差、亮度等要素；根據(jù)用戶需求，確定可視化圖表樣式、風格、布局，從而構建有效的數(shù)字可視化解決方案。

系統(tǒng)建設

系統(tǒng)建設目的

本文提及的現(xiàn)有無人機運維系統(tǒng)是一種基于B/S網(wǎng)絡架構的web服務軟件，主要對各項無人機運維數(shù)據(jù)進行在線集成、報送、統(tǒng)計。但是，它更關注表單報送和數(shù)據(jù)統(tǒng)計的需求，僅供業(yè)務人員處理業(yè)務流程，管理人員無法利用系統(tǒng)中的數(shù)據(jù)來管控整體運維業(yè)務和開展輔助決策。

為了提升無人機運維管理水平，充分利用現(xiàn)有運維數(shù)據(jù)和軟硬件系統(tǒng)，滿足無人機運維業(yè)務需求，現(xiàn)有無人機運維系統(tǒng)需要實施技術改進。采用數(shù)字可視化技術的新系統(tǒng)能提供可視化數(shù)據(jù)，幫助管理人員及時掌握無人機運維業(yè)務的整體態(tài)勢，發(fā)現(xiàn)無人機運維管理的薄弱環(huán)節(jié)，提前預警，做好相關準備工作，提升無人機售后管理效率。

建設需求確定

在設計初期，技術人員首先要明確數(shù)字可視化無人機運維系統(tǒng)建設需求和目標用戶需求。本次系統(tǒng)建設的主要需求是現(xiàn)有無人機運維系統(tǒng)中的數(shù)據(jù)需要整合，應以圖表、動畫等形式向人員進行展示信息。新建成的系統(tǒng)主要有兩種應用場景。一是交互式窗體為管理人員提供無人機和人員等動態(tài)信息；二是數(shù)字可視化信息在大屏上播放，供客戶及相關方觀看。

運維管理人員需要掌握無人機、人員、設備三種信息。無人機信息包括無人機總運營時間、下次保養(yǎng)的預計時間、飛行任務類型、無人機部署位置、近期飛行架次、總飛行架次等統(tǒng)計；人員信息涉及人員所在位置、各駐地人員變化信息、各地運維工作量等統(tǒng)計；設備信息是設備運行狀態(tài)、設備流轉記錄、維修保養(yǎng)記錄等內容。

系統(tǒng)架構設計

系統(tǒng)開發(fā)采用B/S網(wǎng)絡架構，實現(xiàn)了前后端分離。后端部署在網(wǎng)絡服務器，用戶使用Web瀏覽器訪問前端界面。系統(tǒng)開發(fā)基于HTML、CSS和JavaScript語言，使用Vue3.0框架，圖表等可視化功能開發(fā)使用ECharts組件；后端開發(fā)使用SpringBoot、Mybatis框架。后端與MySQL數(shù)據(jù)庫進行交互，并將查詢數(shù)據(jù)以JSON的形式發(fā)送到前端。

功能板塊設計

首先，根據(jù)無人機運維業(yè)務需求，技術人員設計無人機信息、人員信息、設備信息三個功能板塊。

無人機信息展示無人機數(shù)量、無人機部署位置、基于分類統(tǒng)計的飛行架次和運營時間、每架無人機的平均飛行高度和平均運營時間、每架無人機的出動率、每架無人機的任務類型、近期無人機飛行任務等統(tǒng)計。

人員信息展示人員所在位置、人員數(shù)量、基于分類統(tǒng)計的人員數(shù)量和人員工作天數(shù)、近期人員行程、專業(yè)人員數(shù)量、專業(yè)人員工作記錄、各地運維工作量等統(tǒng)計。

設備信息展示設備運行狀態(tài)、設備裝機時間、設備運行時間、設備運輸記錄、設備拆裝記錄、設備維修記錄等內容。

其次，根據(jù)功能板塊展示的內容，技術人員對設計所需的數(shù)據(jù)進行整理。

無人機信息板塊主要涉及無人機編號、部署地點、所屬單位、任務類型、任務日期、起飛時間、降落時間、飛行高度等數(shù)據(jù)。

人員信息包含人員姓名、專業(yè)、工作所在地與飛行、維修、拆裝等工單中數(shù)據(jù)的關聯(lián)關系，人員工作所在地變更記錄、人員工作變更時間等數(shù)據(jù)。

設備信息包括設備名稱、設備編號、裝機時間，設備與飛行、維修、拆裝等工單中數(shù)據(jù)的關聯(lián)關系，設備運行狀態(tài)等數(shù)據(jù)。

最后，技術人員將設計所需數(shù)據(jù)與現(xiàn)有數(shù)據(jù)庫中數(shù)據(jù)的類型、格式和范圍進行對比，提取滿足需求的數(shù)據(jù)。如果現(xiàn)有數(shù)據(jù)庫中的數(shù)據(jù)不能滿足所需數(shù)據(jù)的要求，技術人員需要明確需要補充或修改的數(shù)據(jù)，更新工單格式。

視覺效果設計

視覺效果設計主要涉及背景色、主題色彩、排版布局三種元素設計。

1.背景色設計

背景色與展示場景的顏色關系密切。若頁面在大屏設備上展示，本文普遍推薦深色作為背景色。深色背景可以有效削弱大屏拼縫帶來的視覺分割，也能減小屏幕色差對視覺的影響，同時還可以突出圖表信息，引導觀看人員將視覺集中在展示內容上。

2.主題色彩設計

在頁面制作前，技術人員對頁面中的圖表、邊框、懸窗等元素的顏色明度和飽和度進行設計，統(tǒng)一整個頁面的色彩風格，確保頁面在展示大量數(shù)據(jù)的同時，不會讓觀看者感到混亂。技術人員使用相同顏色表達同一數(shù)據(jù)類型，使用相近顏色表達數(shù)據(jù)關系，使用互補色表達數(shù)據(jù)對比關系?？萍?、工業(yè)產(chǎn)品的可視化數(shù)據(jù)通常采用青色、藍綠色、藍色等主題色，這些顏色能呈現(xiàn)一定的科技感。

3.排版布局設計

首先，技術人員需要了解展示屏幕的物理尺寸。當屏幕物理尺寸的長寬比與屏幕分辨率尺寸的長寬比不一致時，屏幕會自動調整顯示內容的分辨率，導致屏幕顯示內容與設計內容不一致；第二，技術人員先對功能板塊需要展示的信息進行分配。信息的主要指標需呈現(xiàn)在屏幕中央，在屏幕上占較大面積，方便觀看者快速識別信息，然后按照從上到下、從左到右的優(yōu)先級順序，對其他次要指標進行排版布局。表達內容相近的圖表盡量排在一起，以減輕觀看者的認知負擔。圖1為排版布局設計效果圖。

可視化設計

可視化設計的核心目的是實現(xiàn)更好的數(shù)據(jù)表達。因此，可視化設計過程不能脫離數(shù)據(jù)分析，需要滿足信息準確表達、簡單易懂兩大原則。

在可視化設計過程的第一步，技術人員采用分析維度對功能板塊需要展示的所有指標進行可視化設計。分析維度是正確表達數(shù)字規(guī)律和信息的可視化設計方法，主要分為比較、分布、構成、聯(lián)系四類維度。

1.比較維度

通過不同數(shù)據(jù)與變量之間的對比分析，比較維度找出數(shù)據(jù)與變量之間的差異、相似性或數(shù)據(jù)變化趨勢。該維度比較不同時間的數(shù)據(jù)，不同組織或部門的數(shù)據(jù)，不同產(chǎn)品、服務的表現(xiàn)等指標，以幫助分析人員了解不同數(shù)據(jù)之間的關系，找出數(shù)據(jù)變化趨勢，為人員做出合理的決策提供支持。

2.分布維度

通過數(shù)據(jù)分布分析，分布維度能夠提供數(shù)據(jù)的集中程度、離散程度以及可能存在的規(guī)律等信息，目的是幫助分析人員了解數(shù)據(jù)的整體情況，找出數(shù)據(jù)特點和內在規(guī)律，為后續(xù)分析和決策提供支持?；诜植季S度的展示信息包含平均值、中位數(shù)等指標統(tǒng)計，以及正態(tài)分布、偏態(tài)分布等數(shù)據(jù)分布形狀。

3.構成維度

通過數(shù)據(jù)組成分析，構成維度提供各種數(shù)據(jù)在整個數(shù)據(jù)集中的占比。例如，銷售收入中不同產(chǎn)品收入的比例。目的是幫助分析人員了解數(shù)據(jù)組成，找出數(shù)據(jù)集中的重要數(shù)據(jù)，為資源優(yōu)化分配和決策提供參考。

4.聯(lián)系維度

通過數(shù)據(jù)之間的相關性、關聯(lián)性分析，聯(lián)系維度提供不同變量之間的互動關系，發(fā)現(xiàn)變量之間的潛在關系，預測數(shù)據(jù)未來趨勢，識別影響因素等信息。目的是幫助分析人員發(fā)現(xiàn)數(shù)據(jù)之間的關聯(lián)關系，找出影響變量的因素，為正確決策和預測提供支持。

下面介紹不同維度所建設的數(shù)字可視化無人機運維方案。

無人機飛行架次統(tǒng)計圖可以列出無人機在不同年度完成不同項目的飛行架次，以及無人機在不同年度完成同一客戶項目的飛行架次。本文使用比較維度，以橫條圖的形式對飛行架次統(tǒng)計進行直觀展示。在圖2中，橫條圖表達了無人機在不同年度完成不同項目的飛行架次統(tǒng)計。

無人機出動率統(tǒng)計圖表達了任務數(shù)量與時間之間的關系。本文使用分布維度，以波形圖的形式表達無人機出動率的變化。

效果評估和方案迭代

當系統(tǒng)設計完成后，技術人員繪制一個初步設計效果樣圖，并提交給項目相關方評估，然后逐步完善設計方案。設計效果評估和設計方案迭代需關注以下幾點。

第一，評估和迭代過程要遵循從整體到局部的原則。技術人員首先應確定布局和色彩風格；再逐步修改圖表、文字、互動效果等元素，防止在修改過程中反復推倒重來。

第二，評估和迭代操作最好利用實際使用中的屏幕，避免在系統(tǒng)建設完成后，技術人員才發(fā)現(xiàn)屏幕色差、文字不清晰、框體變形等問題。

第三，懸窗、變換、發(fā)光等互動效果均要完成全面測試，防止網(wǎng)絡或程序運行速度慢等因素造成數(shù)據(jù)加載緩慢、崩潰、卡頓，刷新異常等問題。

第四，所有圖表測試均需使用真實數(shù)據(jù)。真實數(shù)據(jù)分布跨度較大，會影響圖表的可讀性和數(shù)據(jù)特征，技術人員需要根據(jù)真實數(shù)據(jù)調整圖表樣式。

其他優(yōu)化設計

1.字體使用

技術人員在使用字體的過程中，首先應考慮觀看者是否能清晰識別字體，是否能清晰分辨O與0?？萍几休^強的界面應避免使用較為繁復的字體，防止字體與整體風格不匹配。最后，需要注意字體是否可以免費使用。

在方案調試過程中，技術人員需要注意字體包是否與其他組件兼容，不同瀏覽器顯示的字體是否一致等現(xiàn)象。

2.動態(tài)效果設計

為了設計更具動感的可視化效果，技術人員通常使用輪播、光效動畫等方式讓界面呈現(xiàn)動態(tài)效果。在動態(tài)效果制作過程中，需要注意動態(tài)效果是否會影響人員觀看展示內容。

3.互動效果設計

為了在同一界面展示更多數(shù)據(jù)內容，技術人員往往使用鉆取、變換等手段設計互動效果。但是需要注意互動點擊區(qū)域在屏幕尺寸變化后是否會產(chǎn)生偏移，互動返回邏輯是否順暢。

總結

以無人機運維業(yè)務全要素管理為導向的數(shù)據(jù)可視化設計與研究，實現(xiàn)了數(shù)字可視化無人機運維系統(tǒng)建設。該系統(tǒng)能提供多維度圖表展示、全面的無人機運維信息，幫助運維管理人員實施有效的管理，提升工作效率、業(yè)務數(shù)據(jù)利用效率，為業(yè)務決策提供支持。