大屏监控系统实战（1）-项目介绍

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

一、整体功能介绍

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

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

二、大屏监控应用场景

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

• 天猫双11、阿里云城市大脑同款数据大屏、企业数据监控、业务汇报必备

  满足数据分析、业务监控、实时指挥、媒体展示等各类场景和人群需求的可视化大屏工具，开箱即用，效果惊艳。

• 三维渲染

  将三维渲染能力引入地理场景，适用于智慧城市、智慧交通、安全监控、商业智能等场景。

• 专业级地理信息可视化

  支持绘制地理轨迹、地理飞线、热力分布、地域区块、3D地球等效果，支持地理数据多层叠加，展现更专业的大屏。基于GIS技术，实现重点单位、消防力量、辖区范围、消防水源、周边道路、微站、联动力量、储备物资等图层信息在地图上统一管理，将重点单位分布、预案状态、单位三维场景和推演内容进行可视化展示，同时支持警情定位，路径导航。支撑应急救援的一张图指挥、一张图调度、一张图分析、一张图决策。

• 沙盘推演部署

  实现沙盘推演流程标准化。用户可根据标准步骤绘制逃生路线、救援路线、标注救援提示信息，实现三维沙盘的自主部署

• 预案智能推演

  基于物联网实时数据和告警联动，自动生成处置步骤，力量调度方案，推荐消防车辆停车点和侦察、进攻、疏散等导航路线，计算消火栓供水能力为灭火救援提供有效作战参数。

三、本系统功能模块

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

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）-打包上线及总结