阶段三:项目开发---民航功能模块实现:任务18:指挥航空公司架次与延误率占比

任务描述

内 容:在前面的“使用Spark清洗统计业务数据并保存到数据库”任务中,已经通过Spark Streaming 清洗程序,将Kafka中Topic为“task_Aftn”的报文数据,经过数据清洗后,保存到了MySQL数据库中;本节任务内容,通过统计查询,计算总架次数和延误架次数的一个比例,即指挥航空公司架次与延误率占比。

学  时:6学时

知识点:Vue和iView熟悉,内部推送和邮件推送处理

重点: 熟悉ECharts双Y轴展示,赋值

任务指导

通过统计查询,计算总架次数和延误架次数的一个比例,即指挥航空公司架次与延误率占比。使用ECharts展示柱状图、设置双Y轴,并绑定数据,展示即可:

1、打开前端kongguan_web项目,继续编写前端代码

  • 柱状图与折线图叠加,设置双Y轴

2、打开后端BigData-KongGuan项目,继续编写后端代码

3、前后端整合

  • 从后台请求数据,赋值展示

展示效果如下:

任务实现

1、打开前端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.mzph.cn/news/868345.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工程仪器振弦采集仪的设计与研发进展

工程仪器振弦采集仪的设计与研发进展 工程仪器振弦采集仪是一种用于测量和记录物体振动参数的仪器。它能够实时采集物体的振动信号&#xff0c;并通过内部的传感器将振动信号转化为电信号&#xff0c;然后进行信号放大和处理&#xff0c;最终以数字形式显示或存储。 河北稳控科…

【源码下载】瓦房店农村电商大数据平台模板

技术详细实现可在评论区留言。 概述 用 echarts 和 jquery 实现的大屏模板效果。 部分代码展示&#xff0c;访问 dt.sim3d.cn 获取源码&#xff1a; (function($){$.extend({initMapChartPath : function(options){var defs {domId : ,mapName:china,mapCenter:["5…

iPhone也能做电子书?不要低估了iPhone处理PDF文件的能力

在数字化时代&#xff0c;我们越来越依赖智能手机来处理日常任务&#xff0c;其中iPhone以其出色的功能和用户友好的界面&#xff0c;成为了许多人的首选。 它不仅仅是通讯工具&#xff0c;更是一个强大的个人数字助理&#xff0c;能够实时扫描文件、制作PDF电子书&#xff0c…

【数据分析】Pandas_DataFrame读写详解:案例解析(第24天)

系列文章目录 一、 读写文件数据 二、df查询数据操作 三、df增加列操作 四、df删除行列操作 五、df数据去重操作 六、df数据修改操作 文章目录 系列文章目录前言一、 读写文件数据1.1 读写excel文件1.2 读写csv文件1.3 读写mysql数据库 二、df查询数据操作2.1 查询df子集基本方…

C# 中的Semaphore(信号量)详解与应用

文章目录 1. 信号量是什么&#xff1f;2. C# 中的 Semaphore 类3. 信号量的使用示例3.1 创建信号量3.2使用信号量同步线程 4. 总结 在并发编程中&#xff0c;同步是一种基本的需求。信号量&#xff08;Semaphore&#xff09;是一种常见的同步机制&#xff0c;它用于控制对共享资…

创建一个AXIS的初始IP核

参考自&#xff1a;https://www.cnblogs.com/milianke/p/17936380.html 以该博主文章为主&#xff0c;本文章做补充。 注意的点&#xff1a; edit ip 在导出axis的主机和从机的时候&#xff0c;记得选择edit ip&#xff0c;这样才能看到从机和主机的源代码&#xff0c;然后…

weblogic加入第三方数据库代理驱动jar包(Oracle为例)

做的是国企项目&#xff0c;项目本身业务并不复杂&#xff0c;最复杂的却是服务器部署问题&#xff0c;对方给提供的服务器分内网、外网交换网&#xff0c;应用在交换网&#xff0c;数据库在内网&#xff0c;应用不能直接访问内网数据库&#xff0c;只能通过安全隔离网闸访问内…

加密与安全_常见的分组密码 ECB、CBC、CFB、OFB模式介绍

文章目录 Pre概述why分组密码和流密码的基本概念什么是模式分组密码的常见模式1. ECB 模式&#xff08;电子密码本模式&#xff09;2. CBC 模式&#xff08;密文分组链接模式&#xff09;3. CFB 模式&#xff08;密文反馈模式&#xff09;4. OFB 模式&#xff08;输出反馈模式&…

数据结构练习

1. 快速排序的非递归是通过栈来实现的&#xff0c;则前序与层次可以通过控制入栈的顺序来实现&#xff0c;因为递归是会一直开辟栈区空间&#xff0c;所以非递归的实现只需要一个栈的大小&#xff0c;而这个大小是小于递归所要的&#xff0c; 非递归与递归的时间复杂度是一样的…

举例说明深拷贝和浅拷贝

概述 简单描述一下对象的实例化过程。 创建对象的时候&#xff0c;或者说在实例化对象的时候 Person 类有年龄和学生类 int age 18; Student stu1 new Student(); 比如此时创建一个 age 对象&#xff0c;一个Student 对象&#xff0c;在虚拟机中&#xff0c;会在堆中开一…

新型水冷电阻设计-双面水冷电阻器

一款革命性的电阻器&#xff0c;专为低压和中压应用而设计&#xff0c;尤其是汽车、牵引或船舶系统中的恶劣条件。 EAK采用先进材料制造&#xff0c;采用专利设计&#xff0c;将电阻元件与水基冷却液封装并完全分离&#xff0c;为水冷应用提供模块化、轻量级、小容量、高功率解…

硅纪元视角 | Speak火了!3个月收入翻倍,OpenAI为何频频下注?

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

外卖跑腿小程序APP软件成品系统和软甲开发APP小程序可进行封装打包

&#xff0c;用户友好界面设计 首先&#xff0c;外卖施限小程序APP应具备用户友好的界面设计。界面应简洁明了&#xff0c;让用户能够方便快捷地议,览和选择所需的菜品或服务。系统应提供详细的菜品描述、价格透明&#xff0c;并允许用户根据口味、偏好进行结进和排序。此外&am…

【基于R语言群体遗传学】-11-二倍体适应性进化

之前的博客&#xff0c;我们讨论了正选择在单倍体中的情况&#xff0c;可以先学习之前的博客&#xff1a; 群体遗传学_tRNA做科研的博客-CSDN博客 分子适应的经典观点是正选择。对于一个新的突变在进化意义上起作用&#xff0c;它必须在罕见时通过选择增加。之前例子中有选择系…

Centos7 安装老版本的chrome

查看自己linux是哪个centos版本 使用以下命令&#xff1a; cat /etc/centos-release我这里是centOS 7。然后在安装最新版的google-chrome时&#xff0c;总是会报错显示存在依赖环境的问题&#xff0c;使得无法安装成功chrome。 Package: google-chrome-stable (/google-chro…

Jenkins 常用的 Linux 指令

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

Leetcode—93. 复原 IP 地址【中等】

2024每日刷题&#xff08;140&#xff09; Leetcode—93. 复原 IP 地址 实现代码 class Solution { public:vector<string> restoreIpAddresses(string s) {vector<string> ans;vector<string> path;function<void(int)>dfs [&](int start) {if…

项目/代码规范与Apifox介绍使用

目录 目录 一、项目规范&#xff1a; &#xff08;一&#xff09;项目结构&#xff1a; &#xff08;二&#xff09;传送的数据对象体 二、代码规范&#xff1a; &#xff08;一&#xff09;数据库命名规范&#xff1a; &#xff08;二&#xff09;注释规范&#xff1a; …

【JSP+Servlet+Maven】——优质外卖订餐系统之概论部分

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

XLSX + LuckySheet + LuckyExcel + Web Worker实现前端的excel预览

文章目录 功能简介简单代码实现web worker 版本效果参考 功能简介 通过LuckyExcel的transformExcelToLucky方法&#xff0c; 我们可以把一个文件直接转成LuckySheet需要的json字符串&#xff0c; 之后我们就可以用LuckySheet预览excelLuckyExcel只能解析xlsx格式的excel文件&a…