指挥航空公司架次与延误率占比

2024-03-18 00:12
文章标签 航空公司 架次 指挥 延误

本文主要是介绍指挥航空公司架次与延误率占比，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

打开前端Vue项目kongguan_web，创建前端 src/components/Delay.vue 页面，并添加柱状图与折线图叠加，设置双Y轴。

  • 页面div设计，代码如下：
<template><div><div class="home"><div id="map-chart-06"></div></div></div>
</template>
... 接下页 ...
  • 引入 ECharts 插件，代码如下：
... 接上页 ...
<script>import echarts from "echarts";import {getFindCompanyDelay} from "../api/user/api.js";
... 接下页 ...
  • 初始化ECharts，代码如下：
... 接上页 ...export default {name: "Home",data() {return {chart: null,geoCoordMap: {},xData: [],        //x轴数值delayData: [],   //延误率sortieData: []   //架次};},mounted() {this.loadData();},methods: {initChart() {const option = {title: {text: '指挥航空公司架次与延误率占比',top: 18,left: 26,},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},grid: {left: '3%',right: '8%',bottom: '3%',top: '15%',containLabel: true},
... 接下页 ...
  • X轴配置，代码如下：
... 接上页 ...
xAxis: [{type: 'category',data: this.xData,axisLabel: {color: '#bdcad3',interval: 0,rotate: 40},axisTick: {show: false},axisLine: {lineStyle: {color: '#bdcad3'},show: false},axisPointer: {type: 'shadow'}}],
... 接下页 ...
  • 双Y轴配置，代码如下：
... 接上页 ...
yAxis: [{type: 'value',name: '',min: 0,max: 120,interval: 12,axisLabel: {formatter: '{value}',color: '#bdcad3'},show: true,axisTick: {show: false},axisLine: {lineStyle: {color: '#bdcad3'},show: false}},{type: 'value',name: '',min: 0,max: 100,interval: 10,axisLabel: {formatter: '{value} %'},show: true,axisTick: {show: false},axisLine: {lineStyle: {color: '#bdcad3'},show: false}}],
... 接下页 ...
  • 数据配置，代码如下：
... 接上页 ...
series: [{name: '架次',type: 'bar',itemStyle: {normal: {color: '#5fcec3'}},barWidth: 20,data: this.sortieData},{name: '延误率',type: 'line',itemStyle: {normal: {color: '#f88f2f'}},yAxisIndex: 1,data: this.delayData}]
... 接下页 ...
  • 获取数据，并拼装数据，代码如下：
... 接上页 ...
loadData() {getFindCompanyDelay().then(data => {if (data.isSuccess) {var res = data.result;for (var i = 0; i < res.length; i++) {this.xData[i] = res[i]['companyName'];this.sortieData[i] = res[i]['count'];this.delayData[i] = res[i]['delayCount'];}this.initChart();} else {this.$message.error("数据获取失败");}});}
... 接下页 ...
  • Delay.vue页面的完整代码如下：
<template><div><div class="home"><div id="map-chart-06"></div></div></div>
</template><script>import echarts from "echarts";import {getFindCompanyDelay} from "../api/user/api.js";export default {name: "Home",data() {return {chart: null,geoCoordMap: {},xData: [],        //x轴数值delayData: [],   //延误率sortieData: []   //架次};},mounted() {this.loadData();},methods: {initChart() {const option = {title: {text: '指挥航空公司架次与延误率占比',top: 18,left: 26,},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},grid: {left: '3%',right: '8%',bottom: '3%',top: '15%',containLabel: true},xAxis: [{type: 'category',data: this.xData,axisLabel: {color: '#bdcad3',interval: 0,rotate: 40},axisTick: {show: false},axisLine: {lineStyle: {color: '#bdcad3'},show: false},axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '',min: 0,max: 120,interval: 12,axisLabel: {formatter: '{value}',color: '#bdcad3'},show: true,axisTick: {show: false},axisLine: {lineStyle: {color: '#bdcad3'},show: false}},{type: 'value',name: '',min: 0,max: 100,interval: 10,axisLabel: {formatter: '{value} %'},show: true,axisTick: {show: false},axisLine: {lineStyle: {color: '#bdcad3'},show: false}}],series: [{name: '架次',type: 'bar',itemStyle: {normal: {color: '#5fcec3'}},barWidth: 20,data: this.sortieData},{name: '延误率',type: 'line',itemStyle: {normal: {color: '#f88f2f'}},yAxisIndex: 1,data: this.delayData}]};this.chart = echarts.init(document.getElementById("map-chart-06"));this.chart.setOption(option);},loadData() {getFindCompanyDelay().then(data => {if (data.isSuccess) {var res = data.result;for (var i = 0; i < res.length; i++) {this.xData[i] = res[i]['companyName'];this.sortieData[i] = res[i]['count'];this.delayData[i] = res[i]['delayCount'];}this.initChart();} else {this.$message.error("数据获取失败");}});}}};
</script><style>.home {height: 490px;margin: 0 auto;background-color: #ffffff;border: 1px solid #ebedf2;border-radius: 10px;box-shadow: 3px 3px 3px 3px #ebedf2;}#map-chart-06 {height: 490px;margin: 0 auto;}
</style>
  • 修改src/api/user/api.js，添加getFindCompanyDelay方法，用于访问服务器端获取数据，内容如下：
import request from '../../utils/request'const baseUrl="/api"//…
//… 其他 function，略。 …
//…//获取指挥航空公司架次与延误率占比
export function getFindCompanyDelay(data){return request({url:baseUrl+"/company/findCompanyDelay",method:"get",data:data})
}//获取各扇区航班数
export function getSectionVal(data){return request({url:baseUrl+"/atc/findSectorSortie",method:"get",data:data})
}

2、后端数据获取，打开后端项目BigData-KongGuan

  • 编写关于航空公司的数据操作和存储的实体类com.qrsoft.entity.Commpany，内容如下：
package com.qrsoft.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import io.swagger.models.auth.In;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.io.Serializable;@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("company_number")
public class Company implements Serializable {@TableId(value = "id",type = IdType.AUTO)private Integer id;@TableField(value = "acid")private String acid;@TableField(value = "company_code3")private String companyCode3;@TableField(value = "company_name")private String companyName;@TableField(value = "delay_count")private String delayCount;@TableField(exist = false)private String count;@TableField(exist = false)private Double companyCount;
}
  • 编写数据访问接口BigData-KongGuan/src/main/java/com/qrsoft/mapper/CompanyMapper.java，继承自BaseMapper，内容如下：
package com.qrsoft.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.qrsoft.entity.Company;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;@Mapper
public interface CompanyMapper extends BaseMapper<Company> {@Select("SELECT company_name,COUNT(*) as count,SUM(delay_count) as delayCount FROM company_number GROUP BY company_name ORDER BY COUNT(*) DESC LIMIT 19;")List<Company> findCompanyDelay();
}
  • 编写数据服务接口BigData-KongGuan/src/main/java/com/qrsoft/service/CompanyService.java，使用baseMapper.findCompanyDelay()方法查询指挥航空公司航班数和航班延误数，内容如下：
package com.qrsoft.service;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.qrsoft.common.Result;
import com.qrsoft.common.ResultConstants;
import com.qrsoft.entity.Company;
import com.qrsoft.mapper.CompanyMapper;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class CompanyService extends ServiceImpl<CompanyMapper, Company> {/*** 查询指挥航空公司航班数，和航班延误数*/public Result findCompanyDelay() {List<Company> companyDelay = baseMapper.findCompanyDelay();for (Company c : companyDelay) {double dcount = Double.parseDouble(c.getDelayCount());double count = Double.parseDouble(c.getCount());Double rest = dcount / count * 100;c.setDelayCount(String.format("%.2f", rest));}return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS, companyDelay);}/*** 查询指挥航空公司占比*/public Result findCompanyByCompanyAll() {List<Company> companyDelay = baseMapper.findCompanyDelay();double sum = 0;for (Company c : companyDelay) {double count = Double.parseDouble(c.getCount());sum+=count;}for (Company c : companyDelay) {double count = Double.parseDouble(c.getCount());c.setCompanyCount((count!=0)?sum/count:0);}return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS, companyDelay);}/*** 机场负荷统计*/public Result findAirportCount(){List<Company> companyDelay = baseMapper.findCompanyDelay();double sum = 0;for (Company c : companyDelay) {double count = Double.parseDouble(c.getCount());sum+=count;}for (Company c : companyDelay) {double count = Double.parseDouble(c.getCount());c.setCompanyCount((count!=0)?sum/count:0);}return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS, companyDelay);}
}
  • 编写BigData-KongGuan/src/main/java/com/qrsoft/controller/CompanyController.java控制器类，处理前端的请求，请求后台地址：/company/findCompanyDelay，使用get方式，内容如下：
@Api(tags = "航空公司航班数，和航班延误数")
@RestController
@RequestMapping("/api/company")
public class CompanyController {@Autowiredprivate CompanyService service;/*** 查询指挥航空公司航班数，和航班延误数*/@ApiOperation(value = "查询指挥航空公司航班数，和航班延误数")@GetMapping("/findCompanyDelay")public Result findCompanyDelay(){return service.findCompanyDelay();}@ApiOperation(value = "查询指挥航空公司架次数占比")@GetMapping("/findCompanyByCompanyAll")public Result findCompanyByCompanyAll(){return service.findCompanyByCompanyAll();}
}

3、完成前端Index.vue页面，展示“指挥航空公司架次与延误率占比”

  • 在src/views/Home/Index.vue页面引入Delay.vue组件，代码如下：
import Delay from "../../components/Delay";
  • 声明组件，代码如下：
components: {AirLine, Section, Delay},
  • 展示，代码如下：
<el-row :gutter="30" v-show="isShow('/flight/delay')"><el-col :span="16" align="center"><Delay/></el-col><el-col :span="8" align="center"><year-warning-chart/></el-col>
</el-row>

注意：在上面代码中【 v-show="isShow('/flight/delay')" 】属性的作用是判断当前登录的用户是否有权限显示当前内容，如果当前登录的用户没有权限，则不会显示当前内容，新用户的权限需要到MySQL数据库中进行设置。

这里有两种方式，可以显示当前内容：

1）去掉【 v-show="isShow('/flight/delay')" 】属性，即不判断是否有权限显示。

2）需要使用有权限的用户登录才能显示，或到数据库中分配权限。

参照任务“动态航线图”进行设置。

例如我们前面使用的用户admin，该用户没有权限显示，所以使用admin用户登录系统时是不会显示当前内容的，如果要进行权限设置，可以进入MySQL安装节点（node3节点），然后进入数据库，为admin用户授权。

[root@node3 ~]# mysql -uroot -p123456
mysql> use kongguan;

先查看角色表中，“管理员”的ID：

修改sys_auth表，添加一个【/flight/delay】权限：

mysql> insert into sys_auth(auth_name,auth_code,menu_url) values('show delay','/flight/delay','/flight/delay');

修改role_auth表，将权限授权给“管理员”角色：

mysql>insert into role_auth(role_id,auth_id) values(3,196);

  • Index.vue页面的完整代码如下：
<template><div class="index"><el-row :gutter="30"  v-show="isShow('/flight/section')"><el-col :span="24" align="center"><Section/></el-col></el-row><el-row :gutter="30" v-show="isShow('/flight/airline')"><el-col :span=24 align="center"><AirLine/></el-col></el-row><el-row :gutter="30" v-show="isShow('/flight/delay')"><el-col :span="16" align="center"><Delay/></el-col><el-col :span="8" align="center"><year-warning-chart/></el-col></el-row></div>
</template><script>import AirLine from "../../components/AirLine";import Section from "../../components/Section";import Delay from "../../components/Delay";import {hasPermission} from "../../utils/permission";export default {data() {return {};},mounted() {},components: {AirLine, Section, Delay},methods: {isShow(permission){return hasPermission(permission);}}};
</script><style scoped>.index {height: 100%;overflow: auto;padding-left: 44px;padding-right: 44px}.index::-webkit-scrollbar {display: none;}.caseClass {background: url('../../assets/images/index-bg.png') no-repeat;background-size: cover;margin-top: 20px;height: 284px;}.el-button {background: transparent;}</style>
  • 确保Hadoop、Spark、Kafka、Redis、MySQL等服务均已经正常启动，如果没有正常启动，请参照前面的安装部署任务，完成这些服务的启动。

例如：查看MySQL是否正常启动。

  • 启动后端项目 BigData-KongGuan

  • 启动前端项目 kongguan_web

  • 页面展示效果：

这篇关于指挥航空公司架次与延误率占比的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/820636。

相关文章

选择一家正规的应急指挥中心控制台厂家有多关键

选择一家正规的应急指挥中心控制台厂家有多关键

在当今社会，随着自然灾害、突发事件及安全挑战的日益复杂多变，应急管理体系的构建显得尤为重要。而应急指挥中心作为应对各类紧急情况的神经中枢，其高效运作离不开先进、可靠的控制台设备支持。在此背景下，选择一家正规的应急指挥中心控制台厂家，成为了确保应急响应速度与效率的关键一环。 　　嘉德立作为一家深耕应急指挥中心控制台领域的厂家，我们致力于为客户提供定制化、智能化的解决方案。我们深知，在紧急情
阅读更多...
智慧公安指挥中心大数据信息化两中心两基地系统方案

智慧公安指挥中心大数据信息化两中心两基地系统方案

1.1 系统建设目标 本系统是一个汇接全市的报警求助的大型通信指挥系统，技术难度较高、可靠性要求高，技术路线的选择至关重要。 在充分考虑XX市公安局的业务需要，利用现代通信及计算机网络技术的基础上，最大程度地实现资源整合、系统集成、信息共享，通过对人力资源、物力资源和技术资源的有效整合，建立一个立足公安、面向社会，集公安指挥、交通控制、消防扑救于一身的多功能、现代化、智能化指挥中心。 为此，
阅读更多...
2024年【起重机械指挥】考试及起重机械指挥新版试题

2024年【起重机械指挥】考试及起重机械指挥新版试题

题库来源：安全生产模拟考试一点通公众号小程序 起重机械指挥考试考前必练！安全生产模拟考试一点通每个月更新起重机械指挥新版试题题目及答案！多做几遍，其实通过起重机械指挥试题及解析很简单。 1、【多选题】《中华人民共和国特种设备安全法》规定，特种设备检验、检测机构及其检验、检测人员应当依法为特种设备生产、经营、使用单位提供（）的检验、检测服务。（  ACDE  ） A、安全 B、及时
阅读更多...
指挥中心操作台厂家的优势有哪些

指挥中心操作台厂家的优势有哪些

指挥中心操作台厂家的优势众多，它们以专业的技术、优质的产品和全面的服务，满足了各行各业对高效、安全、稳定指挥中心的需求。以下将从几个方面详细阐述指挥中心操作台厂家的优势。 　　指挥中心操作台厂家具备强大的研发实力。这些厂家通常拥有专业的研发团队，不断跟进最新技术，致力于操作台的研发与创新。这使得它们能够为客户提供定制化的解决方案，满足各种复杂的指挥中心需求。同时，厂家还能根据客户的需求，提供
阅读更多...
数据挖掘案例-航空公司客户价值分析

数据挖掘案例-航空公司客户价值分析

文章目录 1. 案例背景2. 分析方法与过程2.1 分析流程步骤2.2 分析过程1. 数据探索分析2. 描述性统计分析3. 分布分析1.客户基本信息分布分析2. 客户乘机信息分布分析3. 客户积分信息分布分析 4. 相关性分析 3. 数据预处理3.1 数据清洗3.2 属性约束3. 3 数据转换 4. 模型构建4. 1 客户聚类4. 2 客户价值分析4.3 模型应用 5. 总结思考
阅读更多...
通信指挥类装备（多链路聚合设备）-应急通信指挥解决方案

通信指挥类装备（多链路聚合设备）-应急通信指挥解决方案

现场通信指挥系统是一种功能全面的便携式音视频融合指挥通信平台，可实现现场应急救援指挥、多种通信手段融合、现场通信组网等功能，是现场指挥系统的延伸。 多链路聚合设备，是一款通信指挥类装备，具有 4G/5G，专网，卫星网，宽带自组网，WiFi等多网络接入融合能力。同时使用用户≥200，防护等级≥IP66，单电池可连续工作≥4h。乾元通多链路聚合设备通过CNAS质量检测报告，可同时插入多张SIM卡，将
阅读更多...
如何从大量单号中，一键批量筛选出物流延误的单号

如何从大量单号中，一键批量筛选出物流延误的单号

先来给大家看下例子，下面这个表格里面有3000多个单号 总有些单号物流信息不能及时更新，比如物流走到某中转站就停留在哪里超过24小时甚至更长时间，我们要如何慧眼识珠讯速找出来，及时查明原因并解决问题呢如下图：这个单号物流更新停留在5月3号早上8点29分24秒，后续就没有更新物流信息，今天是5月5号下午14点多说明这个单号已停留《广州转中心》两天多没有更新物流   像这类单号如果量
阅读更多...
便携式应急指挥箱规格参数

便携式应急指挥箱规格参数

概况: 微缩型的无线视频音频传输的机动挥所。体积小、重量轻、公配电方便、携带便携、功能齐全。可进行单兵作战，通过此无线音频视频传输的指挥箱能完成现场图像、语音、数据的采集等功能，可以通过5G/4G/WIFI等多种无线网络完成传输的需求，或MESH/COFDM无线传输（另配），可扩展人脸识别系统。 功能介绍： 互联互通系统：将现场所有的通信方式融为统一一个平台，通过专网，5G网与指挥中
阅读更多...
海外版 双语言爆点游戏 双语音指挥游戏 去中心化投注游戏 双声道音效游戏 附带安装教程

海外版 双语言爆点游戏 双语音指挥游戏 去中心化投注游戏 双声道音效游戏 附带安装教程

海外版双语言爆点游戏/纯vue源码版/去中心化投注游戏 系统为纯VUE源码，附带安装教程 前端只有一个爆点游戏能玩，去中心化无后台 源码下载：https://download.csdn.net/download/m0_66047725/88991298 更多资源下载：关注我。
阅读更多...
易图讯智慧感知应急指挥三维电子沙盘系统设计

易图讯智慧感知应急指挥三维电子沙盘系统设计

易图讯（www.3dgis.top）智慧感知应急指挥三维电子沙盘系统充分融合了物联网与人工智能识别分析技术，实现了从输入到输出的高效智能响应。在物联网方面，系统通过各类传感器和设备，实时采集环境、设备状态等关键数据，为应急指挥提供准确的信息支持。这些数据的实时传输和整合，使得系统能够迅速感知现场情况，为决策提供实时依据。在人工智能识别分析方面，系统利用深度学习算法对采集的数据进行智能分析，自动识别
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2