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

打开前端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/751837.shtml

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

相关文章

AJAX-XMLHttpRequest

AJAX-XMLHttpRequest

XMLHttpRequest 定义&#xff1a; XMLHttpRequest对象用于与服务器交互。通过XMLHttpRequest可以在不断刷新页面的情况下请求特定URL&#xff0c;获取数据。这允许网页在不影响用户操作的情况下&#xff0c;更新页面的局部内容。 关系&#xff1a; axios内部采用XMLHttpReques…
阅读更多...
关于volatile与指令重排序的探讨

关于volatile与指令重排序的探讨

写在开头 在之前的学习我们了解到&#xff0c;为了充分利用缓存&#xff0c;提高程序的执行速度&#xff0c;编译器在底层执行的时候&#xff0c;会进行指令重排序的优化操作&#xff0c;但这种优化&#xff0c;在有些时候会带来 有序性 的问题。 那何为有序性呢&#xff1f;…
阅读更多...
乘积尾零啊填空题）

乘积尾零啊填空题）

乘积尾零 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 如下的 10 行数据&#xff0c;每行有 10 个整数&#xff0c;请你求出它们的乘积的末尾有多少个零? 的乘积的末尾有多少个零? 5650 4542 3554 473 946 4…
阅读更多...
Halcon OCR文字识别

Halcon OCR文字识别

1、OCR文字识别 OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;工具对图像中的文字进行识别和分析。 FontFile : Universal_0-9_NoRej dev_update_window (off) read_image (bottle, bottle2) get_image_size (bottle, Width, Height) dev…
阅读更多...
JavaScript 中实现请求并发控制

JavaScript 中实现请求并发控制

文章目录 浏览器并发请求限制数&#xff08;图&#xff09;实现代码三方插件 假设有 30 个待办任务要执行&#xff0c;而我们希望限制同时执行的任务个数&#xff0c;即最多只有 3 个任务能同时执行。当正在执行任务列表 中的任何 1 个任务完成后&#xff0c;程序会自动从 待办…
阅读更多...
（赋值）运算符号重载

（赋值）运算符号重载

概念以及语法 运算符重载&#xff1a;operator 函数原型&#xff1a;返回值类型 operator 操作符&#xff08;参数列表&#xff09; //操作符有几个操作数就有几个参数 //操作符只包含C/C已经有的&#xff0c;就是说我们不能创建新的操作符&#xff0c;只能重载已有的运算符 …
阅读更多...
VMware安装Ubuntu 18.04.2

VMware安装Ubuntu 18.04.2

下载Ubuntu映像 下载地址&#xff1a;http://old-releases.ubuntu.com/releases/18.04/ 下载名称&#xff1a; ubuntu-18.04.2-desktop-amd64.iso 清华镜像站&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 阿里云镜像站&#xff1a;https://mirrors.ali…
阅读更多...
python 统计中国观鸟记录中心官网已观测的鸟类种类

python 统计中国观鸟记录中心官网已观测的鸟类种类

python 统计中国观鸟记录中心官网已观测的鸟类种类 中国观鸟记录中心网站&#xff1a;https://www.birdreport.cn/ 先下载官网 Excel 文件 文件放置目录如下&#xff1a; home dataset xxx.xlsxxxx.xlsxxxx.xlsx Excelgrep.py &#xff08;进行文件内容提取的程序&#xff…
阅读更多...
关于Ubuntu虚拟机突然上不了网的问题

关于Ubuntu虚拟机突然上不了网的问题

今天刚重新把Ubuntu虚拟机下回来准备大干一场&#xff0c;结果去吃饭回来虚拟机就上不去网了&#xff0c;具体体现为右上角没有网络的图标&#xff0c;下图是有网络的情况&#xff0c;废话不多说&#xff0c;直接给出解决方案&#xff1a;博客在此 我就是运行了这三行代码就成功…
阅读更多...
如何杀死服务器出现的僵尸进程

如何杀死服务器出现的僵尸进程

今天在服务器上进行深度学习训练的时候&#xff0c;发现已经结束程序代码&#xff0c;但是GPU还是显示显存在运行。 为了解决这些问题&#xff0c;网上查找了大量的资料&#xff0c;发现是因为僵尸进程的原因&#xff0c;因此记录相关的解决步骤&#xff0c;方便自己和大家。 …
阅读更多...
Error: Unable to find git in your PATH. flutter dart

Error: Unable to find git in your PATH. flutter dart

我的是重装git &#xff0c;参考 flutter Unable to find git in your PATH - ZJH_BLOGS - 博客园 (cnblogs.com)
阅读更多...
一周速递|全球车联网产业动态（2024年3月17日）

一周速递|全球车联网产业动态（2024年3月17日）

政策法规 1、3月16日&#xff0c;在中国电动汽车百人会论坛&#xff08;2024&#xff09;国际论坛上&#xff0c;国家发改委、工信部、科技部、商务部、住建部等国家部委表示将采取更多务实举措&#xff0c;支持新能源汽车行业企业发展&#xff0c;加大对全固态电池、智能网联…
阅读更多...
Elasticsearch(12) match_bool_prefix的使用

Elasticsearch(12) match_bool_prefix的使用

elasticsearch version&#xff1a; 7.10.1 match_bool_prefix 是 Elasticsearch 中用于执行布尔前缀查询的一种查询类型。这种查询类型特别适用于当你想要匹配一个字段的前缀&#xff0c;并且希望这个字段中的词语是按照一定顺序出现的场景。 match_bool_prefix 语法 { &q…
阅读更多...
设计模式 — — 单例模式

设计模式 — — 单例模式

一、是什么 单例模式只会在全局作用域下创建一次实例对象&#xff0c;让所有需要调用的地方都共享这一单例对象 二、实现 // 单例构造函数 function CreateSingleton (name) {this.name name;this.getName(); };// 获取实例的名字 CreateSingleton.prototype.getName func…
阅读更多...
✅技术社区—跨域问题及解决方案

✅技术社区—跨域问题及解决方案

一、什么是跨域、为什么会跨域&#xff1f; 我们把问题分解 谁出现的跨域&#xff1f; 》 浏览器&#xff01; 为何出现&#xff1f; 》 同源策略 什么是同源策略&#xff1f; 根据百度百科 同源策略/SOP&#xff08;Same origin policy&#xff09;是一种约定&#xff0…
阅读更多...
Linux 时间系统调用

Linux 时间系统调用

UNIX及LinuxQ的时间系统是由「新纪元时间」Epoch开始计算起。Epoch是指定为1970年1月1日凌晨零点零分零秒&#xff0c;格林威治时间。目前大部份的UNX系统都是用32位来记录时间&#xff0c;正值表示为1970以后&#xff0c;负值则表示1970年以前。 对于当前时间到Epoch 我们用两…
阅读更多...
代码算法训练营day10 | 232.用栈实现队列、225. 用队列实现栈

代码算法训练营day10 | 232.用栈实现队列、225. 用队列实现栈

day10: 232.用栈实现队列225. 用队列实现栈 232.用栈实现队列 题目链接 状态&#xff1a; 文档&#xff1a;programmercarl.com 思路&#xff1a; 用栈实现队列。要先明白两者的区别。 栈&#xff1a;单开门&#xff0c;先进后出&#xff0c;只有一端能进出。 队列&#xff1a;…
阅读更多...
继承 ResponseEntityExceptionHandler

继承 ResponseEntityExceptionHandler

目录 作用概述 示例-HttpRequestMethodNotSupportedException 示例-自定义异常处理 总示例 使用了ResponseEntityExceptionHandler后&#xff0c;为什么发生了异常后返回体为空 方法执行顺序 作用概述 这是一个方便的基类&#xff0c;用于希望通过 ExceptionHandler 方法…
阅读更多...
Vue项目的搭建

Vue项目的搭建

Node.js 下载 Node.js — Download (nodejs.org)https://nodejs.org/en/download/ 安装 测试 winR->cmd执行 node -v配置 在安装目录下创建两个子文件夹node_cache和node_global,我的就是 D:\nodejs\node_cache D:\nodejs\node_global 在node_global文件下再创建一个…
阅读更多...
并查集（详解+例题）

并查集（详解+例题）

1、作用 将两个集合合并 询问两个元素是否在一个集合中 2、基本原理 每个集合用一颗树表示。树根的编号就是整个集合的编号。每个节点存储它的父节点&#xff0c;p[x]表示x的父节点。 3、实现 问题1&#xff1a;如何判断树根&#xff1a;if(p[x]x); 问题2&#xff1a;如何求…
阅读更多...
最新文章

Copyright @ 2022~2023