🏘️ 智慧乡村 & 智慧小区 动态数据大屏系统
基于 Python + Flask + ECharts 实现的政务科技风可视化大屏，纯模拟数据，开箱即用！
📋 项目简介
本项目包含两个完整的可视化动态大屏：
- 智慧乡村大屏- 展示乡村治理、产业、人口、环境等全方位数据
- 智慧小区大屏- 展示小区建设、物业、安防、智慧社区等数据
两个大屏共享一个 Flask 服务，通过不同路由切换，支持一键跳转。
核心特点：
- 🎨 政务科技风深蓝主题
- 📊 ECharts 动态图表
- ⚡ 数据 3 秒自动刷新
- 🗺️ 真实地图 + 楼栋分布图
- ✨ 扫描线、粒子飘浮、发光边框等科技风特效
- 🚀 纯模拟数据，无需数据库，开箱即用
🛠️ 技术栈
| 技术 | 说明 |
|---|---|
| Python 3.7+ | 后端语言 |
| Flask | 轻量级 Web 框架 |
| ECharts 5.x | 可视化图表库 |
| HTML/CSS/JS | 前端页面 |
| 阿里云 DataV | 河南省地图 GeoJSON |
📁 项目结构
smart_rural_data_screen/ ├── app.py # Flask 主应用（路由 + 模拟数据生成） ├── templates/ │ ├── rural.html # 乡村大屏页面 │ └── community.html # 小区大屏页面 ├── static/ # 静态资源目录（可扩展） ├── README.md # 项目说明文档 └── 智慧乡村动态数据大屏项目需求说明书.md🚀 快速开始
1. 安装依赖
pipinstallflask2. 启动服务
cdsmart_rural_data_screen python app.py3. 访问大屏
| 大屏 | 地址 |
|---|---|
| 乡村大屏 | http://localhost:5000 或 http://localhost:5000/rural |
| 小区大屏 | http://localhost:5000/community |
启动后控制台会显示访问地址，浏览器打开即可全屏展示（按 F11 进入全屏模式）
🖥️ 功能模块详解
一、智慧乡村大屏
| 模块 | 说明 | 图表类型 |
|---|---|---|
| 乡村总体概况 | 总人口、总户数、耕地面积、常住/流动人口、覆盖率 | 数字卡片 |
| 产业经济分布 | 农业、养殖、文旅、电商、手工业占比 | 环形饼图 |
| 人居环境监测 | 空气质量、水质达标率、绿化覆盖率、垃圾处理率 | 雷达图 |
| 民生服务与治理 | 便民服务、投诉处理、纠纷调解、政策宣传、网格巡查 | 柱状图 |
| 智慧安防监控 | 监控设备在线率 | 仪表盘 |
| 人口结构分析 | 老人、青年、儿童年龄结构 | 柱状图 |
| 河南省地图 | 17个地级市监控点位、预警点位、异常点位 | 散点地图 + 飞线动画 |
| 季度收入趋势 | Q1-Q4 收入变化 | 折线面积图 |
二、智慧小区大屏
| 模块 | 说明 | 图表类型 |
|---|---|---|
| 小区总体概况 | 总户数、总人口、建筑面积、楼栋数、车位数、绿化率 | 数字卡片 |
| 基础设施运行 | 电梯正常率、停车位使用率、道路状况、照明覆盖率 | 雷达图 |
| 物业服务数据 | 报修处理率、投诉处理率、缴费率、社区活动 | 柱状图 |
| 安防监控系统 | 监控设备在线率 | 仪表盘 |
| 环境卫生监测 | 垃圾分类、绿化养护、清洁保洁、消杀除害 | 饼图 |
| 智慧社区服务 | 智能设备数、在线率、APP用户数、在线服务 | 折线图 |
| 楼栋分布图 | 50栋楼可视化，显示楼层、户数、状态、室温 | 散点图 |
| 能耗趋势分析 | 近6个月用电量、用水量对比 | 柱状图 |
✨ 科技风特效说明
视觉效果
- 扫描线动画- 地图区域有垂直扫描光效，模拟雷达扫描
- 粒子飘浮- 背景 30 个粒子随机浮动，营造科技感
- 四角发光边框- 地图区域四角装饰发光边框
- 卡片悬浮高亮- 鼠标悬浮时边框发光 + 内阴影效果
- 数字跳动动画- 数值变化时有过渡动画
- 渐变标题- 标题从白色到青色渐变 + 光晕效果
地图特效（河南省地图）
- 阿里云 DataV 加载真实河南省 GeoJSON 地图
- 支持地图缩放、拖拽交互
- 涟漪动画散点（正常/预警/异常三种状态）
- 飞线动画连接各城市
- 底部滚动字幕 - 实时滚动物业通知、安全提示等
📊 数据刷新机制
- 所有数据3 秒自动刷新，模拟实时监控效果
- 数值变化幅度轻微、合理，符合实际数据逻辑
- 图表跟随数据自动动态变化
- 全部数据由 Python 后端随机生成，前端渲染展示
🔧 代码说明
后端（app.py）
# 路由设计@app.route('/')# 默认跳转乡村大屏@app.route('/rural')# 乡村大屏@app.route('/community')# 小区大屏# API 接口（乡村）@app.route('/api/rural/overview')@app.route('/api/rural/industry')@app.route('/api/rural/environment')# ...# API 接口（小区）@app.route('/api/community/overview')@app.route('/api/community/infrastructure')@app.route('/api/community/buildings')# ...前端关键实现
// 数据自动刷新setInterval(updateData,3000);// 数字跳动动画functionanimateNumber(elementId,newValue){element.classList.add('updating');setTimeout(()=>{element.textContent=newValue;element.classList.remove('updating');},150);}// 河南省地图加载fetch('https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json').then(res=>res.json()).then(geoJson=>{echarts.registerMap('henan',geoJson);initMapChart();});🎯 适配场景
- 政务大厅数据展示
- 乡村治理指挥中心
- 智慧社区运营监控
- 项目汇报演示
- 大屏投放展示
📝 自定义修改指南
修改端口
# app.py 最后一行app.run(debug=True,host='0.0.0.0',port=5000)# 改为你想要的端口修改数据范围
# 例如修改乡村总人口范围defgenerate_rural_overview():return{'total_population':random.randint(2800,3200),# 修改这里的范围# ...}添加新的图表
- 在
app.py中添加数据生成函数和 API 路由 - 在对应的 HTML 文件中添加图表容器
<div id="new_chart"></div> - 在 JavaScript 中初始化 ECharts 并调用 API 更新数据
🐛 常见问题
Q: 地图加载不出来？
A: 检查网络连接，地图数据从阿里云 CDN 加载。如需离线使用，可下载 GeoJSON 文件到本地。
Q: 中文乱码？
A: 确保 HTML 文件编码为 UTF-8，Flask 默认支持。
Q: 如何全屏展示？
A: 浏览器按 F11 进入全屏模式，或使用 Chrome 的"创建快捷方式 → 在窗口中运行"。
📄 许可证
MIT License - 自由使用，请保留出处说明
🤝 联系作者
如果这个项目对你有帮助，欢迎点赞、收藏、关注！
如有问题或建议，欢迎在评论区交流讨论。
如果觉得不错，请给个 Star ⭐ 支持一下！
