大屏监控系统实战(1)-项目介绍

简介: 大屏监控系统实战(1)-项目介绍

这个项目的起源非常的偶然,源于今年我有幸入选2019年CSDN博客之星年度总评选,并且排名一直还不错,在前20的行列中,而排名第一的天元浪子大大,用python分析了一波投票情况,我本人对自己也非常感兴趣,但因为我不会用python,而且python画出来的统计图不是动态图,于是我就想用Java做后端,前端用图表组件做个靓靓的大屏监控出来。大概花了两天时间,初见成效。现在简单介绍如下:

一、整体功能介绍

监控大屏是现在比较火的一个模式,因为他的视频冲击力很强,做出来的大屏科技感十足,所以也越来越受欢迎,像笔者所在的公司,就有设备状态监控、每日数据备份、项目实施情况、各地系统运行状况等十多个大屏。每天首长们在监控大厅就可以实时看到各部门的运行情况,为他们后续的运营决策提供数据支撑。基于这种项目的特殊性,主要有页面多样化,数据维度复杂化,每个数字化大屏就是一个单独的系统,后台的数据支持也完全不同,所以制作成本还是比较高的。

目前阿里提供的DataV数据可视化产品,能让更多的人看到数据可视化的魅力,帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用。DataV提供丰富的可视化模板,满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。阿里的DataV产品提前制作了大量的模板,只要给他数据源,就能快速生成一张纸漂亮的大屏监控。唯一的缺点就是该产品收费,最便宜的版本,大概一个月要450块钱左右。对于我这种动手党来说,知道这个事情就好。剩余的还只能是自己来做。

二、大屏监控应用场景

基本上把阿里的产品介绍拿过来就可以了。当然我也做了一些补充。

    • 天猫双11、阿里云城市大脑同款数据大屏、企业数据监控、业务汇报必备
      满足数据分析、业务监控、实时指挥、媒体展示等各类场景和人群需求的可视化大屏工具,开箱即用,效果惊艳。
    • 三维渲染
      将三维渲染能力引入地理场景,适用于智慧城市、智慧交通、安全监控、商业智能等场景。
    • 专业级地理信息可视化
      支持绘制地理轨迹、地理飞线、热力分布、地域区块、3D地球等效果,支持地理数据多层叠加,展现更专业的大屏。基于GIS技术,实现重点单位、消防力量、辖区范围、消防水源、周边道路、微站、联动力量、储备物资等图层信息在地图上统一管理,将重点单位分布、预案状态、单位三维场景和推演内容进行可视化展示,同时支持警情定位,路径导航。支撑应急救援的一张图指挥、一张图调度、一张图分析、一张图决策。
    • 沙盘推演部署
      实现沙盘推演流程标准化。用户可根据标准步骤绘制逃生路线、救援路线、标注救援提示信息,实现三维沙盘的自主部署
    • 预案智能推演
      基于物联网实时数据和告警联动,自动生成处置步骤,力量调度方案,推荐消防车辆停车点和侦察、进攻、疏散等导航路线,计算消火栓供水能力为灭火救援提供有效作战参数。

    三、本系统功能模块

    本次参与活动的博主是201位,我每隔五分钟会爬取投票网站的投票数,并存到数据库,然后再基于这些数据进行分析。

    image.gif编辑

    1.投票概况

    动态爬取投票网站数据,实时展示参与人数、累计投票和访问次数三个指标。

    2.TOP20日增投票数量柱状图

    基于爬取到数据库的每个博主的投票数,统计前一日投票数据增量,渲染为柱状图排行榜。

    3.TOP10的10分钟投票增量曲线

    目前取的是距现在200分钟,每隔十分钟的投票增量情况,本来想取近三天的,但数据量大,导致浏览器会渲染失败,所以只取了20个数据来展示。

    4.TOP10的24小时得票数据统计曲线

    因为现在总票数的基数比较大,所以我取了最近24小时,每小时一个值渲染了前十名博主的得票情况。

    5.TOP20实时数据展示

    实时展示前20名博主的最新时间、目前票数、排名以及跟前一日相比的排名变化情况。

    四、项目技术栈

    整体:

    Git版本控制、Shell脚本

    项目后端:

    Java、SpringBoot、MybatisPlus、爬虫Jsoup、HttpClient、Maven项目构建

    项目前端:

    Vue、dataV可视化组件、axios异步话组件、webpack打包工具

    五、教程最终目的

    代码目前已经开源,我计划手把手教大家去把每一个功能都实现一次。也会把自己在完成项目过程中遇到的坑点都跟大家分享出来,让大家都能做成属于自己的数据可视化大屏应用来。

    六、总结

    目前专栏已基本完结,定价9.9元,前两章免费,大家在阅读完后觉得质量还可以就请支持一下我把。整个专栏目录如下:

      1. 大屏监控系统实战(1)-项目介绍
      2. 大屏监控系统实战(2)-后台工程搭建
      3. 大屏监控系统实战(3)-前端工程搭建
      4. 大屏监控系统实战(4)-如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行?
      5. 大屏监控系统实战(5)-父工程搭建及前端相关配置
      6. 大屏监控系统实战(6)-爬虫初探:爬取CSDN博客之星年度总评选投票统计数据
      7. 大屏监控系统实战(7)-后端整合MybatisPlus并暴露服务
      8. 大屏监控系统实战(8)-前端请求后端获取数据并显示
      9. 大屏监控系统实战(9)-爬取所有博主实时投票票数并存数据库
      10. 大屏监控系统实战(10)-大屏展示前20个博主的排名、票数及名次相对于前一日的升降情况
      11. 大屏监控系统实战(11)-大屏显示日增投票数量柱状图的制作
      12. 大屏监控系统实战(12)-10分钟投票增量曲线制作(一)
      13. 大屏监控系统实战(13)-10分钟投票增量曲线制作(二)
      14. 大屏监控系统实战(14)-24小时得票数量统计曲线制作
      15. 大屏监控系统实战(15)-打包上线及总结
      相关实践学习
      基于Hologres轻松玩转一站式实时仓库
      本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
      阿里云实时数仓实战 - 项目介绍及架构设计
      课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
      相关文章
      |
      18天前
      |
      前端开发 BI
      基于jeecgboot的大屏设计器开发——大屏报表管理(二)
      基于jeecgboot的大屏设计器开发——大屏报表管理(二)
      22 0
      |
      18天前
      |
      移动开发 前端开发 BI
      基于jeecgboot的大屏设计器开发——大屏报表管理(一)
      基于jeecgboot的大屏设计器开发——大屏报表管理(一)
      10 0
      |
      11月前
      |
      缓存 数据可视化 关系型数据库
      漏刻有时数据可视化大屏phpstudyPro环境部署配置中的常见问题
      漏刻有时数据可视化大屏phpstudyPro环境部署配置中的常见问题
      59 0
      |
      SQL 消息中间件 存储
      实时标签开发——从零开始搭建实时用户画像(五)
      实时标签开发——从零开始搭建实时用户画像(五)
      1138 1
      实时标签开发——从零开始搭建实时用户画像(五)
      |
      监控
      大屏监控系统实战(16)-项目拾遗
      大屏监控系统实战(16)-项目拾遗
      125 0
      大屏监控系统实战(16)-项目拾遗
      |
      移动开发 监控 数据可视化
      从0到1开发可视化数据大屏(上)
      前言:大数据时代,以大屏为载体的数据可视化需求日渐增多,数据大屏成为越来越多企业绩效展示,报表展示,业务监控等等的一种形式,大屏的上线带来的是便捷,无需编码,用户可以直接将所要呈现的组件拖拽到画布上,然后进行随意配置和布局,所见及所得。前段时间我们上线了内部的自己的可视化数据大屏beta版本
      505 0
      从0到1开发可视化数据大屏(上)
      |
      JSON 移动开发 数据可视化
      从0到1开发可视化数据大屏(下)
      前言:这是一篇迟到的下集,上次分享了如何从0到1搭建一个可视化数据大屏,介绍了数据搭配的前期调研、控件区域的开发、画布模块的开发等等。上篇的链接点我👉 从0到1开发可视化数据大屏(上) 而下集主要围绕.控件管理模块、数据管理模块、图层管理模块这几个模块来介绍。
      233 0
      从0到1开发可视化数据大屏(下)
      |
      存储 移动开发 监控
      钉钉前端-如何设计前端实时分析及报警系统
      作者:钉钉前端团队监控负责人 烛象 2013 年毕业,2017 年来到钉钉的,入职钉钉的时候是 P6,然后通过做前端监控、做一些模块化代码包、效率等工具,顺利的得到了一些晋升的机会。
      926 0
      钉钉前端-如何设计前端实时分析及报警系统
      |
      监控 数据可视化
      阿里云日志服务构建网站实时分析大盘实战
      场景分析 挖掘数据价值是当前企业级网站共同面临的问题。买买网是一个电商平台网站,每天拥有大量的用户访问和购买记录。为了引导用户直接消费,提升购买率和转化率,不同的用户类别需要推荐不同的商品信息。因此大数据快速分析的能力就必不可少了。
      2738 0
      |
      SQL 编解码 数据可视化
      Qt编写数据可视化大屏界面电子看板12-数据库采集
      一、前言 数据采集是整个数据可视化大屏界面电子看板系统核心功能,没有数据源,这仅仅是个玩具UI,没啥用,当然默认做了定时器模拟数据,产生随机数据,这个可以直接配置文件修改来选择采用何种数据采集方法,总结了一下基本上会有这样几种数据源,timer-模拟数据 db-数据库采集 tcp-网络采集 http-post请求,大量的web会选择采用http作为post网络请求来获取数据,而对于本人来说,更喜欢用数据库作为数据源,这样可以避免很多扯皮的事情,比如请求出错或者得到错误的数据等,而数据库是死的,不涉及到其他任何程序的干扰,也不需要做任何对接,只要规范好数据库表和字段即可。
      1157 0

      热门文章

      最新文章