什么是智慧机场
智慧機場就是運用各種信息化和通信技術手段，感測、分析、整合機場各種關鍵信息，實現對機場安全、服務、運營、保障等各種需求做出數字化處理、智能化響應的建設和再造過程。
效果
所有源碼請查看這里
機場的發展層級
第一步: 基本機場運行
-
獨立運營，周邊少量互動
-
關注核心生產與安全運營
-
為旅客提供基本共性服務
第二步： 敏捷性機場
-
敏捷性機場
-
根據外部變化為旅客服務
-
高效運營效率需求 被動運行，
-
局限于出行
第三步： 智慧型機場
- 新技術廣泛應用
- 部門間高效協同
- 提供主動、個性化服務
為什么要做智慧機場
智慧機場讓信息更精準。智能旅客導乘導航屏核心功能的研發，將旅客人臉與身份信息進行綁定，在經過旅客授權后，“刷臉”就能立即獲取航班信息及動態，不僅縮短了旅客拖著大包小包在航顯大屏讓人眼花繚亂的信息中進行“人工”檢索的時間，更是在提供基本航班信息的基礎上增加了登機口步行時間、登機時間提醒等功能，最大程度降低了航班信息查詢成本，讓旅客獲取信息更輕松、更精準。
如何建設智慧機場
建設智慧機場肯定是分為硬件和軟件的。在當前的博客中僅僅分享在軟件層面來進行項目的從0->1的完成；
智慧機場總共分為4個大模塊:
- 全球一體化
- 機場管理
- 模擬仿真
- AIOT監測
全球一體化
點擊全球一體化中，可以看到整個全球的機場情況，當點擊某一個地區的時候，就出現上圖的情況。分析出今日航班執行的情況，人員情況和今日飛機信息等。
機場管理
在機場管理當中，管理每架飛機的情況。分析出當日飛機的起飛時間，航返客流的情況等。
模擬仿真
在模擬仿真中，可以模擬飛機的起飛的動畫，分析當前飛機的實時數據等
AIOT監測
在當前模塊中，統計人員管理，物流管理，現場安全等
關鍵代碼
從前端的角度來說，在做上面這種項目中，用到最多的是echart.js.然后就是常見的html5 + css3啦！那么，在這里就來分享下如何用echart來寫出好看的報表。
引入
<!DOCTYPE html> <html> <head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script> </head> </html> 復制代碼容器
為Echarts放置一個具備寬高的DOM容器
<div id="main" style="width:100%; height:600px; margin:80px 0 80px 0;"></div> 復制代碼Echarts加載數據
<script type="text/javascript"> // 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {backgroundColor: '#2c343c',title: {text: 'Customized Pie', left: 'center', top: 20, textStyle: { color: '#ccc' } }, tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ozvdkddzhkzd%)" }, visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1]}}, series : [ { name:'訪問來源', type:'pie',radius : '55%', center: ['50%', '50%'], data:[ {value:335, name:'直接訪問'},{value:310, name:'郵件營銷'},{value:274, name:'聯盟廣告'},{value:235, name:'視頻廣告'},{value:400, name:'搜索引擎'}].sort(function (a, b) { return a.value - b.value; }), roseType: 'radius', label: { normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, labelLine: { normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' }, smooth: 0.2, length: 10, length2: 20 } }, itemStyle: { normal: { color: '#c23531', shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, animationType: 'scale', animationEasing: 'elasticOut', animationDelay: function (idx) { return Math.random() * 200;} } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> 復制代碼效果
拓展
當然，一個項目中肯定不止這么寫代碼，這里展示核心的前端代碼。但是三維場景中里面酷炫的數據怎么來的呢？歡迎您來和我一起討論😀😀😀
總結
- 上一篇： ER模型详解
- 下一篇： CP2102和CP2104的区别