当前位置: 首页 > news >正文

微信分享的h5网站开发网站主机的类型

微信分享的h5网站开发,网站主机的类型,网站建站网站建设,网页模板网站cms1、Spark Streaming清洗服务#xff0c;接收kafka中Topic为“task_ATC”中的数据#xff0c;保存在MySQL中。 打开SpringBoot项目BigData-Etl-KongGuan 请认真阅读#xff1a;在前面的“使用Spark清洗统计业务数据并保存到数据库中”任务阶段中应该已经完成了所有Topic的数…1、Spark Streaming清洗服务接收kafka中Topic为“task_ATC”中的数据保存在MySQL中。 打开SpringBoot项目BigData-Etl-KongGuan 请认真阅读在前面的“使用Spark清洗统计业务数据并保存到数据库中”任务阶段中应该已经完成了所有Topic的数据的清洗如果已经完成了扇区数据的清洗工作则此步骤可以跳过如果前面没有完成扇区数据的清洗工作可参照“使用Spark清洗统计业务数据并保存到数据库中”任务阶段的其他Topic数据的清洗过程完成扇区数据的清洗。 代码路径BigData-Etl-KongGuan/src/main/java/com/qrsoft/etl/spark/SparkUtil.java扇区数据清洗的核心代码如下 /*** 业务处理* param jsonObject 扇区数据*/public void TaskAtc(JSONObject jsonObject) throws Exception {ATCDao atcD new ATCDao();ATCEntity atc new ATCEntity();//设置清洗方式String sectorName null;try {sectorName jsonObject.getString(PLAN_SECTOR_NAME);} catch (Exception e) {//logger.info( ATC无扇区数据 [{}]);System.out.println(ATC无扇区数据);}try {//根据扇区查询是否已经开始对该扇区进行统计String ACID jsonObject.getString(ACID);if(sectorName!null!sectorName.equals()){boolean bool atcD.isExistThisAtc(ACID);atc.setAcId(jsonObject.getString(ACID));atc.setAtcTime(jsonObject.getString(ATC_TIME));atc.setExecuteDate(jsonObject.getString(EXECUTE_DATE));atc.setPlanSectorName(jsonObject.getString(PLAN_SECTOR_NAME));if (bool) {//存在在原来基础上1修改数据库中该航迹数量atcD.updateAnAtcMsg(atc);} else {//尚未进行统计 创建一个统计信息atcD.createAnAtcMsg(atc);}}} catch (Exception e) {e.printStackTrace();}} 上面的代码中会使用到 BigData-Etl-KongGuan/src/main/java/com/qrsoft/etl/dao/entity/ATCEntity.java 类和BigData-Etl-KongGuan/src/main/java/com/qrsoft/etl/dao/ATCDao.java类。 其中ATCEntity类是用于保存扇区数据的实体类 package com.qrsoft.etl.dao.entity;import lombok.Data; import java.io.Serializable;public class ATCEntity implements Serializable {private Integer id;private String acId;private String atcTime;private String executeDate;private String planSectorName;public Integer getId() { return id; }public void setId(Integer id) { this.id id; }public String getAcId() { return acId;}public void setAcId(String acId) { this.acId acId; }public String getAtcTime() { return atcTime; }public void setAtcTime(String atcTime) { this.atcTime atcTime; }public String getExecuteDate() { return executeDate; }public void setExecuteDate(String executeDate) { this.executeDate executeDate; }public String getPlanSectorName() { return planSectorName; }public void setPlanSectorName(String planSectorName) { this.planSectorName planSectorName; } } ATCDao类是扇区数据的数据访问类包括扇区统计等方法 package com.qrsoft.etl.dao;import com.qrsoft.etl.dao.entity.ATCEntity; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.sql.ResultSet; import java.sql.SQLException;public class ATCDao extends IBaseDao {private final static Logger logger LoggerFactory.getLogger(ATCDao.class);/*** 根据航班号查询是否该扇区有该航班的统计数据存在* param acid 航班号*/public boolean isExistThisAtc(String acid){String sql SELECT COUNT(*) from atc_number where ACIDacid;;Object[] params {};ResultSet comRs this.execute(sql, params);return getBool(comRs);}//修改指定航班的扇区统计信息public void updateAnAtcMsg(ATCEntity atc) {String sql update atc_number set PLAN_SECTOR_NAMEatc.getPlanSectorName(),ATC_TIMEatc.getAtcTime(),EXECUTE_DATEatc.getExecuteDate() where ACIDatc.getAcId(); ;Object[] params {};try {this.update(sql, params);} catch (SQLException e) {logger.info(修改指定航班的扇区统计信息失败! atc.getAcId());e.printStackTrace();}}//创建新航班扇区的统计信息public void createAnAtcMsg(ATCEntity atc) {String sql insert into atc_number (ACID,ATC_TIME,EXECUTE_DATE,PLAN_SECTOR_NAME) values(atc.getAcId(),atc.getAtcTime(),atc.getExecuteDate(),atc.getPlanSectorName());;Object[] params {};try {this.update(sql, params);} catch (SQLException e) {logger.info(创建航班的扇区的统计信息失败atc.getAcId());e.printStackTrace();}} } 2、前端Vue页面设计并完成数据绑定展示扇区数据 在Vue项目kongguan_web中src/components文件夹下面新建Section.vue添加页面div设计代码并对数据进行循环绑定操作 templatedivel-rowel-col :xs12 :sm12 :lg{span: 4} v-foritem in resultValdiv classgrid-content bg-purplediv classtop_div_css/divdiv classcentendiv classto_titls{{item.planSectorName}}扇区/divdiv classto_titls_two{{item.count}}架/div/div/div/el-col/el-row/div /template ... 接下页 ... 在Vue项目中kongguan_web/src/components/Section.vue页面中添加css布局设计代码 解释 ... 接上页 ... style /*.el-col-lg-4-8 {*//* width: 20%;*//*}*/.centen{width: 100%;}.to_titls{margin-top: 15px;text-align: center;font-size: 20px;color: #676767;}.to_titls_two{margin-top: 15px;text-align: center;font-size: 25px;color: #307be3;}.top_div_css{width: 100%;height: 10px;background-color: #4eb9f8;border-top-left-radius: 2em;border-top-right-radius: 2em;} .el-row {margin-bottom: 20px;:last-child {margin-bottom: 0;}}.el-col {border-radius: 2em;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #ffffff;}.bg-purple-light {background: #e5e9f2;}.grid-content {margin-top: 13px;border-radius: 1em;min-height: 100px;margin-left: 15px;margin-right: 15px;/*width: 200px;*/background-color: #ffffff;border: 1px solid #ebedf2;box-shadow: 3px 3px 3px 3px #ebedf2;}.row-bg {padding: 10px 0;background-color: #f9fafc;} /style ... 接下页 ... 在kongguan_web/src/components/Section.vue页面中引入 api从后台获取数据 ... 接上页 ... scriptimport echarts from echarts;import {getSectionVal } from ../api/user/api.js;export default {name: Home,data() {return {chart: null,OneSection:G,TwoSection:K,TwoSection:E,TwoSection:P,resultVal:{}};},mounted() {this.loadData();},methods: {initChart() {},loadData(){getSectionVal().then(data {if (data.isSuccess) {var res data.result;this.resultVal res;} else {this.$message.error(数据获取失败);}});}}}; /script 在上面的页面代码中首先引入了api/user/api.js组件在api/user/api.js中添加如下代码设置请求方式请求的服务端地址和请求的参数等 import request from ../../utils/request const baseUrl/api//… //… 其他 function略。 … //…//获取各扇区航班数 export function getSectionVal(data){return request({url:baseUrl/atc/findSectorSortie,method:get,data:data}) } 3、后端项目 BigData-KongGuan 的处理过程 首先创建一个数据实体类com.qrsoft.entity.Atc用于操作和保存扇区数据代码所在位置BigData-KongGuan/src/main/java/com/qrsoft/entity/Atc.java内容如下 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 java.io.Serializable;Data AllArgsConstructor NoArgsConstructor TableName(atc_number) public class Atc implements Serializable {TableId(value id,type IdType.AUTO)private Integer id;TableField(value ACID)private String acId;TableField(value ATC_TIME)private String atcTime;TableField(value EXECUTE_DATE)private String executeDate;TableField(value PLAN_SECTOR_NAME)private String planSectorName;TableField(exist false)private String count; } 然后编写扇区数据的数据访问接口BigData-KongGuan/src/main/java/com/qrsoft/mapper/AtcMapper.java继承BaseMapper类代码如下 package com.qrsoft.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.qrsoft.entity.Atc; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Select;import java.util.List;Mapper public interface AtcMapper extends BaseMapperAtc {Select(select PLAN_SECTOR_NAME,COUNT(*) as count from atc_number GROUP BY PLAN_SECTOR_NAME;)ListAtc findSectorSortie();Select(select EXECUTE_DATE from atc_number group by EXECUTE_DATE order by EXECUTE_DATE desc limit 19;)ListString findATCTime();Select(select PLAN_SECTOR_NAME,count(*) as count from atc_number where EXECUTE_DATE #{executeTime} and PLAN_SECTOR_NAME #{sectorName})Atc findATCTime2(String executeTime,String sectorName); } 然后建立BigData-KongGuan/src/main/java/com/qrsoft/service/AtcService.java类在类中使用baseMapper调用findSectorSortie方法查询所有扇区航班架次 package com.qrsoft.service;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.qrsoft.common.Result; import com.qrsoft.common.ResultConstants; import com.qrsoft.entity.Atc; import com.qrsoft.entity.MultiRadar; import com.qrsoft.mapper.AtcMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;import java.util.ArrayList; import java.util.HashMap; import java.util.List;Service public class AtcService extends ServiceImplAtcMapper, Atc {Autowiredprivate MultiRadarService multiRadarService;/*** 查询所有扇区航班架次*/public Result findSectorSortie() {ListAtc sectorSortie baseMapper.findSectorSortie();return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS, sectorSortie);}/*** 根据扇区号查询架次* param planSectorName*/public Result findLocusCount(String planSectorName) {QueryWrapperMultiRadar queryWrapper new QueryWrapper();queryWrapper.eq(section,planSectorName);int count multiRadarService.count(queryWrapper);return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS, count);}/*** 扇区架次数动态统计(饼状图)*/public Result findATCTime() {ListString sectorName new ArrayList();sectorName.add(K);sectorName.add(S);sectorName.add(E);sectorName.add(P);sectorName.add(G);ListString executeTime baseMapper.findATCTime();List list new ArrayList();for (int i 0; executeTime.size() i; i) {ArrayListObject objects new ArrayList();for (int j 0; sectorName.size() j; j) {Atc atcTime2 baseMapper.findATCTime2(executeTime.get(i), sectorName.get(j));HashMapString, Object map new HashMap();if (atcTime2.getPlanSectorName() ! null) {map.put(atcTime2.getPlanSectorName(), atcTime2.getCount());}else {map.put(sectorName.get(j),0);}objects.add(map);}list.add(objects);}return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS, list);} } 上面代码中会依赖com.qrsoft.service.MultiRadarService类并使用其继承的ServiceImplT,U中的count()方法该方法用于根据扇区号查询架次 package com.qrsoft.service;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.qrsoft.common.Result; import com.qrsoft.common.ResultConstants; import com.qrsoft.entity.MultiRadar; import com.qrsoft.mapper.MultiRadarMapper; import org.springframework.stereotype.Service;import java.util.ArrayList; import java.util.List;Service public class MultiRadarService extends ServiceImplMultiRadarMapper, MultiRadar {/*** 查询综合航迹数据*/public Result findMultRadar(){ListMultiRadar multiRadars baseMapper.selectList(null);return new Result(ResultConstants.SUCCESS, ResultConstants.C_SUCCESS,multiRadars);}} 建立扇区数据访问的控制器AtcController.java代码路径BigData-KongGuan/src/main/java/com/qrsoft/controller/AtcController.java内容如下 package com.qrsoft.controller;import com.qrsoft.common.Result; import com.qrsoft.service.AtcService; 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.RequestParam; import org.springframework.web.bind.annotation.RestController;Api(tags 扇区操作类) RestController RequestMapping(/api/atc) public class AtcController {Autowiredprivate AtcService service;/*** 获取各扇区航班数*/ApiOperation(value 获取各扇区航班数)GetMapping(/findSectorSortie)public Result findSectorSortie(){return service.findSectorSortie();}/*** 根据扇区名称获取该扇区航班数* param planSectorName*/ApiOperation(value 根据扇区名称获取该扇区航班数)GetMapping(/findLocusCount)public Result findLocusCount(RequestParam String planSectorName){return service.findLocusCount(planSectorName);}/*** 扇区架次数动态统计(饼状图)*/ApiOperation(value 扇区架次数动态统计(饼状图))GetMapping(/findATCTime)public Result findATCTime(){return service.findATCTime();} } 4、再回到前端src/components/Section.vue页面解释一下代码 首先在src/components/Section.vue页面中设置resultVal:{}接收后台数据代码如下 data() {return {chart: null,OneSection:G,TwoSection:K,TwoSection:E,TwoSection:P,resultVal:{}}; }, 请求后台数据并赋值代码如下 loadData(){getSectionVal().then(data {if (data.isSuccess) {var res data.result;this.resultVal res;} else {this.$message.error(数据获取失败);}}); } 循环绑定数据代码如下 el-col :span4 v-foritem in resultValdiv classgrid-content bg-purplediv classtop_div_css/divdiv classcentendiv classto_titls{{item.planSectorName}}扇区/divdiv classto_titls_two{{item.count}}架/div/div/div /el-col 5、在Index.vue页面进行展示 在kongguan_web/src/views/Home/Index.vue页面中引入Section组件 import Section from ../../components/Section; 声明组件 components: {AirLine, Section}, 页面展示 el-row :gutter30 v-showisShow(/flight/section)el-col :span24 aligncenterSection//el-col /el-row 注意在上面代码中【 v-showisShow(/flight/section) 】属性的作用是判断当前登录的用户是否有权限显示当前内容如果当前登录的用户没有权限则不会显示当前内容新用户的权限需要到MySQL数据库中进行设置。 这里有两种方式可以显示当前内容 1去掉【 v-showisShow(/flight/section) 】属性即不判断是否有权限显示。 2需要使用有权限的用户登录才能显示或到数据库中分配权限。 参照任务“动态航线图”进行设置。 例如我们前面使用的用户admin该用户没有权限显示所以使用admin用户登录系统时是不会显示当前内容的如果要进行权限设置可以进入MySQL安装节点node3节点然后进入数据库为admin用户授权。 [rootnode3 ~]# mysql -uroot -p123456 mysql use kongguan; 先查看角色表中“管理员”的ID 修改sys_auth表添加一个【/flight/section】权限 mysql insert into sys_auth(auth_name,auth_code,menu_url) values(show section,/flight/section,/flight/section); 修改role_auth表将权限授权给“管理员”角色 mysqlinsert into role_auth(role_id,auth_id) values(3,195); Index.vue页面的完整代码如下 templatediv classindexel-row :gutter30 v-showisShow(/flight/section)el-col :span24 aligncenterSection//el-col/el-rowel-row :gutter30 v-showisShow(/flight/airline)el-col :span24 aligncenterAirLine//el-col/el-row/div /templatescriptimport AirLine from ../../components/AirLine;import Section from ../../components/Section;import {hasPermission} from ../../utils/permission;export default {data() {return {};},mounted() {},components: {AirLine, Section},methods: {isShow(permission){return hasPermission(permission);}}}; /scriptstyle 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等服务均已经正常启动如果没有正常启动请参照前面的安装部署任务完成这些服务的启动。 例如在node3节点上启动Redis。 例如查看MySQL是否正常启动。 启动后端项目 BigData-KongGuan 启动前端项目 kongguan_web 最终页面展示效果如下
http://www.tj-hxxt.cn/news/222645.html

相关文章:

  • 做企业网站 空间怎么买寻找聊城做网站的公司
  • html网站发布海纳企业网站管理系统源码
  • 网页粒子效果网站北京市推广公司
  • 长春老火车站图片有空间怎么做网站
  • 企业官网属于什么网站品质网站设
  • 企业综合管理系统建网站做优化
  • 淘宝网站代理怎么做网站内部链接建设
  • 网站设计收费标准无极在线招聘最新消息
  • 临漳 网站建设中企动力邮箱官网
  • 沈阳公司网站设计公司wordpress 去掉自豪
  • 做问卷不花钱的网站怎么自己制作app
  • 南通仿站定制模板建站工程建设承包合同
  • 大型网站建设公司制作网站公司网站建设方案模板
  • 宜春代做网站笑话网站程序
  • 有做网站设计吗网站建设中色无极
  • 怎么做关于梦想的网站免费的有哪些网站可以做电子邀请函
  • 做网站首页的表格的代码闽侯县住房和城乡建设网站
  • 对于一个确定的网和设计方案seo关键词有话要多少钱
  • 校园网站建设软件福州网站设计大概费用
  • 单位建网站的优势wordpress运行crawling
  • xp做网站深圳宝安做网站的公司
  • 做网站宽高怎么决定厦门seo顾问
  • 如何让百度搜到自己的网站网站免费诊断
  • 自己建站流程十堰seo
  • 微信公众号做电影网站要域名吗如何做好公司网站建设
  • 阿里云备案网站备案域名购买成品网站多少钱
  • 网站开发计入什么会计科目网站网页区别是什么
  • 永修建设局网站网站不要了该如何处理
  • 各大网站做推广的广告怎么做滨江区建设局网站
  • 都匀市建设局网站建筑人才网招聘官网登录