什么是智慧机场

万象工作室

已于 2022-10-19 09:39:38 修改

阅读量1.5k

点赞数 2

分类专栏： vuejs 文章标签：前端

于 2022-10-19 09:36:54 首次发布

本文链接：https://blog.csdn.net/u011134727/article/details/127399326

版权

vuejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

智慧机场就是运用各种信息化和通信技术手段，感测、分析、整合机场各种关键信息，实现对机场安全、服务、运营、保障等各种需求做出数字化处理、智能化响应的建设和再造过程。

效果

在这里插入图片描述

所有源码请查看这里

机场的发展层级

第一步: 基本机场运行

独立运营，周边少量互动
关注核心生产与安全运营
为旅客提供基本共性服务

第二步：敏捷性机场

敏捷性机场
根据外部变化为旅客服务
高效运营效率需求被动运行，
局限于出行

第三步：智慧型机场

新技术广泛应用
部门间高效协同
提供主动、个性化服务

为什么要做智慧机场

智慧机场让信息更精准。智能旅客导乘导航屏核心功能的研发，将旅客人脸与身份信息进行绑定，在经过旅客授权后，“刷脸”就能立即获取航班信息及动态，不仅缩短了旅客拖着大包小包在航显大屏让人眼花缭乱的信息中进行“人工”检索的时间，更是在提供基本航班信息的基础上增加了登机口步行时间、登机时间提醒等功能，最大程度降低了航班信息查询成本，让旅客获取信息更轻松、更精准。

在这里插入图片描述

如何建设智慧机场

建设智慧机场肯定是分为硬件和软件的。在当前的博客中仅仅分享在软件层面来进行项目的从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} ({d}%)"  
          },                  
          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>
复制代码