阶段三：项目开发---民航功能模块实现：任务23：机场当前负荷统计

任务描述

内容：针对进出机场的航班数进行统计。

学时：6学时

知识点：机场当前负荷统计

重点：数据绑定、后台请求

任务指导

机场当前负荷统计，请求后台获取数据，绑定数据，首页引入组件：

1、确定设计图，引入ECharts组件

2、后台请求数据

3、Vue页面绑定数据

4、实现设计效果

核心代码：

1、前端核心代码：kongguan_web/src/components/echart/AirPortCountChart.vue

2、后端核心代码：BigData-KongGuan/src/main/java/com/qrsoft/controller/CompanyController.java

实现的设计效果：

实现效果如下图左侧红色框内所示。

任务实现

1、打开前端Vue项目kongguan_web，完成前端src/components/echart/AirPortCountChart.vue页面设计

• 在AirPortCountChart.vue页面添加div设计

... 接下文 ...

• 初始化报表数据 data

... 接上文 ...

... 接下文 ...

• 页面样式

• 加载数据时，会调用src/api/chartdata/chartdata.js中定义的getAirPortCount()方法，向服务端发送GET请求，获取 机场当前负荷统计 数据，chartdata.js的完整代码如下：

import request from '../../utils/request'
const baseUrl = "/api"
/**
 * 扇区架次数动态统计
 */
export function findATCTime() {
  return request({
    url: baseUrl + "/atc/findATCTime",
    method: "GET"
  })
}
/**
 * 获取各个扇区通话饱和度
 */
export function findCallSaturation() {
  return request({
    url: baseUrl + "/callSaturation/findCallSaturation",
    method: "GET"
  })
}

/**
* 年度告警分类统计
*/
export function annualWarningStatisticsByCategory() {
  return request({
    url: baseUrl + "/warnFlightHistory/annualWarningStatisticsByCategory",
    method: "GET"
  })
}
/**
* 机场当前负荷统计
*/
export function getAirPortCount() {
  return request({
    url: baseUrl + "/company/getAirPortCount",
    method: "GET"
  })
}
/**
 * 获取从青岛起飞航班数前十的航线
 * @returns {AxiosPromise}
 */
export function findByLimit() {
  return request({
    url: baseUrl + "/airLine/findByLimit",
    method: "GET"
  })
}

2、打开后端项目BigData-KongGuan，完成后端服务开发

• 创建控制器类com/qrsoft/controller/CompanyController.java，添加getAirPortCount()方法响应前端发送的GET请求，CompanyController.java的完整代码如下：

package com.qrsoft.controller;

import com.qrsoft.common.Result;
import com.qrsoft.service.AftnService;
import com.qrsoft.service.CompanyService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Api(tags = "航空公司航班数，和航班延误数")
@RestController
@RequestMapping("/api/company")
public class CompanyController {

    @Autowired
    private CompanyService service;

    @Autowired
    private AftnService aftnService;

    /**
     * 查询指挥航空公司航班数，和航班延误数
     */
    @ApiOperation(value = "查询指挥航空公司航班数，和航班延误数")
    @GetMapping("/findCompanyDelay")
    public Result findCompanyDelay(){
        return service.findCompanyDelay();
    }

    @ApiOperation(value = "查询指挥航空公司架次数占比")
    @GetMapping("/findCompanyByCompanyAll")
    public Result findCompanyByCompanyAll(){
        return service.findCompanyByCompanyAll();
    }

    @ApiOperation(value = "机场当前负荷统计")
    @GetMapping("/getAirPortCount")
    public Result getAirPortCount(){
        return aftnService.getAirPortCount();
    }
}

• 这里会依赖AftnService类，所以需要创建com.qrsoft.service.AftnService类，内容如下：

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.Aftn;
import com.qrsoft.mapper.AftnMapper;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;


@Service
public class AftnService extends ServiceImpl {

	public Result getAirPortCount() {
		List aftnList = baseMapper.getAftnList();
		return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS, aftnList);
	}
}

• 还会依赖Aftn报文数据操作和存储的实体类，创建com.qrsoft.entity.Aftn类

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 lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;

import java.io.Serializable;
import java.util.Date;

@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("kg_aftn")
//报文
public class Aftn implements Serializable {

	@TableId(value = "id", type = IdType.AUTO)
	private Integer id;

	@TableField(value = "send_time")
	private String sendTime;

	@TableField(value = "area_source")
	private String areaSource;

	@TableField(value = "plan_source")
	private String planSource;

	@TableField(value = "acid")
	private String acid;

	@TableField(value = "adep")
	private String adep;

	@TableField(value = "ades")
	private String ades;

	@TableField(value = "stod")
	private String stod;

	@TableField(value = "stoa")
	private String stoa;

	@TableField(value = "aftn_status")
	private String aftnStatus;

	@TableField(value = "execute_date")
	private String executeDate;

	@TableField(value = "ssr_code")
	private String ssrCode;

	@TableField(value = "fly_type")
	private String flyType;

	@TableField(value = "aircraft_type")
	private String aircraftType;

	@TableField(value = "tail_flow")
	private String tailFlow;

	@TableField(value = "plan_height")
	private String planHeight;

	@TableField(value = "plan_speed")
	private String planSpeed;

	@TableField(exist = false)
	private String airCname;
	@TableField(exist = false)
	private Integer adepCount;
	@TableField(exist = false)
	private Integer adesCount;

}

• 创建Mapper数据访问类com.qrsoft.mapper.AftnMapper接口，用于获于机场飞机起降数量等操作

package com.qrsoft.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.qrsoft.entity.Aftn;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

@Mapper
public interface AftnMapper extends BaseMapper {

	//获取机场飞机起飞的数量
	@Select("select kg_airport.AIRPORT_CNAME as airCname,count(*) as adepCount\n" +
			"from kg_airport INNER JOIN kg_aftn on kg_airport.AIRPORT_CODE4 = kg_aftn.adep\n" +
			"GROUP BY kg_aftn.adep;")
	List getAftnByAdep();

	//获取机场飞机降落的数量
	@Select("select kg_airport.AIRPORT_CNAME as airCname,count(*) as adesCount\n" +
			"from kg_airport INNER JOIN kg_aftn on kg_airport.AIRPORT_CODE4 = kg_aftn.ades\n" +
			"GROUP BY kg_aftn.ades")
	List getAftnByAdes();

	@Select("SELECT\n" +
			"adep.airCname,adep.adepCount,ades.adesCount\n" +
			"FROM\n" +
			"(\n" +
			"SELECT\n" +
			"kg_airport.AIRPORT_CNAME AS airCname,\n" +
			"count(*) AS adesCount \n" +
			"FROM\n" +
			"kg_airport\n" +
			"INNER JOIN kg_aftn ON kg_airport.AIRPORT_CODE4 = kg_aftn.ades \n" +
			"GROUP BY\n" +
			"kg_aftn.ades \n" +
			") AS ades right JOIN (\n" +
			"SELECT\n" +
			"kg_airport.AIRPORT_CNAME AS airCname,\n" +
			"count(*) AS adepCount \n" +
			"FROM\n" +
			"kg_airport\n" +
			"INNER JOIN kg_aftn ON kg_airport.AIRPORT_CODE4 = kg_aftn.adep \n" +
			"GROUP BY\n" +
			"kg_aftn.adep \n" +
			") AS adep ON ades.airCname = adep.airCname")
	List getAftnList();
}

3、前后端整合，实现设计效果

• 打开前端Vue项目，在src/views/Home/Index.vue引入AirPortCountChart组件

... 略 ...
  import AirLine from "../../components/AirLine";
  import Section from "../../components/Section";
  import WarnStatistice from "../../components/WarnStatistice";
  import Delay from "../../components/Delay";

  import {hasPermission} from "../../utils/permission";

  import SectorFlightChart from "../../components/echart/SectorFlightChart";
  import SectorCallChart from "../../components/echart/SectorCallChart";
  import YearWarningChart from "../../components/echart/YearWarningChart";
  import AirPortCountChart from "../../components/echart/AirPortCountChart";

  export default {
    data() {
      return {
      };
    },

    mounted() {
    },
    components: {AirLine, Section, WarnStatistice, Delay,SectorFlightChart,SectorCallChart,YearWarningChart,AirPortCountChart},
    methods: {
      isShow(permission){
        return hasPermission(permission);
        }

    }
... 略 ...

• 在src/views/Home/Index.vue添加“机场当前负荷统计”组件AirPortCountChart，代码如下（在代码中找到相应的标签，然后进行修改）：

• src/views/Home/Index.vue的完整代码如下：

• 确保Hadoop、Spark、Kafka、Redis、MySQL等服务均已经正常启动，如果没有正常启动，请参照前面的安装部署任务，完成这些服务的启动。

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

• 启动后端项目 BigData-KongGuan，如图启动src/main/java/com/qrsoft/BigDataKongGuanApplication.java类

• 启动前端项目 kongguan_web，代码如下

[email protected] dev /root/kongguan_web
vue-cli-service serve --open

• 报表的最终展示效果如下图左侧红色框内所示：