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

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
数据可视化DataV,5个大屏 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)-打包上线及总结
      相关实践学习
      DataV Board用户界面概览
      本实验带领用户熟悉DataV Board这款可视化产品的用户界面
      阿里云实时数仓实战 - 项目介绍及架构设计
      课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
      相关文章
      |
      编解码 监控 数据可视化
      数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API、Echarts、百度地图)
      数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API、Echarts、百度地图)
      307 0
      |
      缓存 数据可视化 关系型数据库
      漏刻有时数据可视化大屏phpstudyPro环境部署配置中的常见问题
      漏刻有时数据可视化大屏phpstudyPro环境部署配置中的常见问题
      94 0
      |
      监控
      大屏监控系统实战(16)-项目拾遗
      大屏监控系统实战(16)-项目拾遗
      159 0
      大屏监控系统实战(16)-项目拾遗
      |
      数据采集 监控 前端开发
      功能介绍数据采集详解|学习笔记
      快速学习功能介绍数据采集详解
      功能介绍数据采集详解|学习笔记
      |
      传感器 网络协议 算法
      WMWS在线监测管理系统的工程常用计算工具
      WMWS(Wincom Monitoring Web System)为终端客户开发的在线监测管理系统,基于BS 架构。 可在浏览端实现项目管理、数据查看与下载、曲线查看等操作。系统界面风格简约、布局统一、逻辑清晰,具有极佳的操控体验。三层监测要素架构,实现了多项目、多设备、多测点无限扩展,可满足小型、中型的单(多) 项目管理。
      WMWS在线监测管理系统的工程常用计算工具
      |
      监控 SQL Java
      案例速览 | 如何为3~12岁孩子提供全方面监控能力?
      通过阿里自研的 ARMS 应用实时监控工具,既满足无侵入的接入方式和低损耗的资源占用比例,还提供了全方位的应用监控能力和白屏化的配置使用能力,而且 ARMS 结合众多客户场景和专家经验,提供智能诊断功能。
      1039 2
      案例速览 | 如何为3~12岁孩子提供全方面监控能力?
      |
      数据采集
      数据采集(案例)
      爬虫系列文章
      213 0
      |
      SQL 安全 数据可视化
      .NET Core开发的iNeuOS工业互联网平台,发布 iNeuDA 数据分析展示组件,快捷开发图形报表和数据大屏
      经过一段时间的努力,iNeuDA产品组件已经开发和测试完成,现在正式上线。现在iNeuOS工业互联网操作系统的技术体系和产品体系更佳完善,为中小企业提供更佳全面解决方案。
      453 0
      .NET Core开发的iNeuOS工业互联网平台,发布 iNeuDA 数据分析展示组件,快捷开发图形报表和数据大屏
      |
      机器学习/深度学习 消息中间件 存储
      监控指标10K+!携程实时智能检测平台实践
      本文将介绍携程实时智能异常检测平台——Prophet。到目前为止,Prophet 基本覆盖了携程所有业务线,监控指标的数量达到 10K+,覆盖了携程所有订单、支付等重要的业务指标。Prophet 将时间序列的数据作为数据输入,以监控平台作为接入对象,以智能告警实现异常的告警功能,并基于 Flink 实时计算引擎来实现异常的实时预警,提供一站式异常检测解决方案。
      监控指标10K+!携程实时智能检测平台实践
      |
      监控 数据可视化
      阿里云日志服务构建网站实时分析大盘实战
      场景分析 挖掘数据价值是当前企业级网站共同面临的问题。买买网是一个电商平台网站,每天拥有大量的用户访问和购买记录。为了引导用户直接消费,提升购买率和转化率,不同的用户类别需要推荐不同的商品信息。因此大数据快速分析的能力就必不可少了。
      2798 0