ARTICLE · 1002808
兰州智慧消防大数据平台前端模板(含源码)
引言
在城市安全管理中，消防是重中之重。如何实时掌握辖区内的建筑安全等级、消防设备状态、报警信息？如何将分散的消防数据汇聚到一张地图上直观呈现？
今天，我们为大家带来一款“消防大数据平台”大屏源码。它创新性地融合了 百度地图 JavaScript API、Vue.js 与 ECharts，实现了“地理空间+设备监控+业务统计”的三维可视化，是智慧消防、城市安全监测等项目的绝佳参考模板。
一、 效果预览：一屏统揽城市消防安全
该平台采用经典的“左-中-右”三栏布局，整体风格为深色科技风，信息密度极高，非常适合指挥中心、消防监控大厅的大屏展示。
- 顶部（Header）
：左侧系统 Logo，中间醒目的标题“消防大数据平台”，右侧实时日期与时间（精确到秒），营造专业严谨的氛围。 - 左侧（建筑安全评估）
： - 安全评分
：通过仪表盘（Gauge）展示整体安全评分，并标注“安全等级”，一图看懂辖区安全状况。 - 建筑安全评分排名
：以滚动列表展示重点建筑（如甘肃省兰州市博物馆、西北大厦、世纪广场等）的安全评分，支持自动滚动，实时反映各建筑的安全状况。 - 安全隐患 TOP10
：以图表形式展示最严重的 10 个安全隐患，辅助精准排查。 - 中部（核心地图）
： - 百度地图
：全屏加载百度地图，中心点位于兰州（103.71878, 36.10396），缩放级别 15。地图采用午夜蓝样式（ midnight），与整体深色主题完美融合。 - 三类设备点位
：通过不同颜色图标标注设备状态——绿色（正常）、红色（报警）、黄色（故障），直观展示设备分布与健康状况。 - 底部（业务统计）
： - 消防给水系统
：通过图表展示给水系统的运行状态。 - 联动报警统计
：柱状图展示每月联动报警数量。 - 监管报警统计
：柱状图展示监管报警趋势。 - 日常巡检统计
：图表展示巡查数量与覆盖率。 - 右侧（运维与告警）
： - 维保统计
：展示设备维修数量（69）、维保次数与维保覆盖率（环形图）。 - 故障统计
：柱状图展示故障数量及处理及时率。 - 火警统计
：柱状图展示火警数量及处理及时率。 - 执法结果统计
：图表展示执法处理结果分布。
二、 核心架构：地图、框架与图表的强强联合
这套代码的技术选型非常成熟，兼顾了开发效率与运行性能：
- 基础骨架
：HTML5 + CSS3（Bootstrap 栅格系统 + 自定义 main.css、jq22.css），实现响应式布局。 - 前端框架
：Vue.js 2.x（从 vue.min.js引入），负责顶部时间与日期的响应式绑定（{{ year }}等变量）。 - 图表渲染
：ECharts 4.x，结合主题文件 walden.js与roma.js，驱动所有可视化图表。 - 地图引擎
：百度地图 JavaScript API v2.0（需申请 AK），提供底图渲染、缩放、标注等能力。 - 动效增强
： jquery.countUp.js：实现数字滚动增长动画。 fontscroll.js：实现列表自动滚动（建筑安全评分排名）。 jQuery 1.x，负责 DOM 操作与插件初始化。
三、 功能模块深度解析
1. 百度地图与设备点位标注（核心亮点）
中部地图是系统的视觉中心。通过 new BMap.Map('container') 创建地图实例，并设置中心点与缩放级别。代码定义了三个数组 markerArr、markerArr1、markerArr2，分别存储绿色（正常）、红色（报警）、黄色（故障）设备坐标。通过 addMarker、addMarker1、addMarker2 函数，利用 BMap.Icon 自定义图标，将设备以不同颜色标注在地图上。地图样式设置为 midnight，背景色调整为半透明深蓝，完美融入大屏风格。
2. Vue.js 驱动实时时间
顶部时间区域使用 Vue 插值语法 {{ year }}-{{ month }}-{{ date }} {{ hour }}:{{ minute }}:{{ second }} {{ strDate }}。在 main.js 中，Vue 实例会定时更新这些数据，实现时间的自动刷新，无需手动操作 DOM。
3. 安全评分仪表盘
左侧“安全评分”模块通过 echartAqpf 容器初始化一个 ECharts 仪表盘（Gauge），直观展示整体安全分数。仪表盘通常配合阈值颜色（如绿/黄/红），让安全等级一目了然。
4. 建筑安全评分排名滚动
FontScroll 区域利用 fontscroll.js 实现列表的自动滚动。通过 CSS 动画或 JavaScript 定时改变 marginTop，让列表项循环滚动，适合展示静态排名或实时更新的排行榜。
5. 底部与右侧图表矩阵
底部四个统计模块（消防给水、联动报警、监管报警、日常巡检）与右侧四个模块（维保、故障、火警、执法）均采用 ECharts 柱状图、环形图等。通过 setOption 方法注入数据，支持响应式更新。主题文件 walden.js 或 roma.js 可一键切换图表配色风格。
6. 数字滚动动画
维保统计中的设备维修数（69）等数字，可通过 jquery.countUp.js 实现从 0 到目标值的滚动效果，增强视觉冲击力。只需为数字元素添加 data-num="69" 并调用 countUp() 即可。
四、 代码亮点与二次开发建议
亮点：
- 多技术栈融合
：Vue 负责数据绑定，ECharts 负责图表，百度地图负责空间可视化，各司其职。 - 设备状态可视化
：通过红黄绿三色图标在地图上直观区分设备健康度，便于快速定位问题。 - 主题可切换
：内置 walden和roma两套 ECharts 主题，可轻松更换图表风格。 - 模块化结构
：每个图表区域都有独立的 id和对应的初始化脚本，便于维护。
二次开发建议：
- 对接实时数据
：将静态的 markerArr坐标与图表数据替换为 WebSocket 或 Ajax 轮询，实现设备状态与报警信息的实时更新。 - 完善 Vue 实例
：在 main.js中补全 Vue 的data和methods，实现时间的自动更新（使用setInterval更新year、month等变量）。 - 地图交互增强
：为地图标注添加点击事件，弹出信息窗口显示设备详情、历史报警记录等。 - 增加告警动画
：当设备状态为红色（报警）时，通过 CSS3 动画让图标闪烁，吸引注意力。 - 响应式优化
：虽然使用了 Bootstrap，但大屏通常固定分辨率。可添加 window.resize监听，调用myChart.resize()确保图表自适应。
五、 适用场景
这套源码不仅适用于消防，还可灵活改造：
- 智慧安防
：监控摄像头状态、门禁报警分布。 - 设备管理
：IoT 设备监控、传感器网络状态。 - 城市应急
：应急资源分布、突发事件定位。
👉 代码下载：微信：lalako_2 ->
（008 兰州智慧消防大数据平台）
联系我们Contact us我们以客户为中心，致力于提供卓越的技术解决方案和优质的服务。无论您有何需求，我们的专业团队都将竭诚为您服务，助力您的业务成功。联系我们，共同开启数字化转型之旅！
We are customer-centric and committed to providing superior technology solutions and excellent service. Whatever your needs, our team of professionals is here to help you succeed in your business. Contact us to start your digital transformation journey together!
China: +86 137 2614 7037
HongKong: +852 5413 0417
Macau: +853 6589 1304
US: +1 971 2597 935
Mail:HongYingClub@gmail.com
Whatapp: +852 5413 0417
Telegram: @hongyingclub_office