數字可視化無人機運維系統建設

數據可視化概念

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

數字可視化技術

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

HTML5標準

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

ECharts組件

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

Vue框架

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

數字可視化解決方案設計流程

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

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

系統建設

系統建設目的

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

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

建設需求確定

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

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

系統架構設計

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

功能板塊設計

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

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

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

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

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

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

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

設備信息包括設備名稱、設備編號、裝機時間，設備與飛行、維修、拆裝等工單中數據的關聯關系，設備運行狀態等數據。

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

視覺效果設計

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

1.背景色設計

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

2.主題色彩設計

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

3.排版布局設計

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

可視化設計

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

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

1.比較維度

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

2.分布維度

通過數據分布分析，分布維度能夠提供數據的集中程度、離散程度以及可能存在的規律等信息，目的是幫助分析人員了解數據的整體情況，找出數據特點和內在規律，為后續分析和決策提供支持。基于分布維度的展示信息包含平均值、中位數等指標統計，以及正態分布、偏態分布等數據分布形狀。

3.構成維度

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

4.聯系維度

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

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

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

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

效果評估和方案迭代

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

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

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

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

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

其他優化設計

1.字體使用

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

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

2.動態效果設計

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

3.互動效果設計

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

總結

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