ISEE小语
在网上看到国学大师季羡林说的一句话：
“走运时，要想到倒霉，不要得意过了头；倒霉时，要想到走运，不必垂头丧气。心态始终保持平衡，情绪始终保持稳定，此亦长寿之道也。”
回顾上篇
Python实现对MySql数据库创建和自动导入SQL文件
ISEE小栈，公众号：ISEE小栈Python实现对MySql数据库创建和自动导入SQL文件-续篇
开始本篇
Flask Big Screen 基于 Flask 的大屏显示系统，随着数字化时代的到来，大屏显示系统已经成为各行各业的标准配置。而在这个领域，使用Flask框架构建的大屏显示系统以其高效、灵活和可扩展性强的特点，逐渐受到了开发者的青睐。
前期文章中分享过Flask+pyecharts结合显示图表，有兄弟留言希望分享大屏显示的，本次抽点时间在网上找了个开源的大屏模板， 结合Flask，拥抱现流行的python，实现了Flask Big Screen。
本次选用的是【某省大数据可视化平台】-土地交易的模板，其中的数据是服务端添加的静态数据，没有涉及数据库，后续会添加。
环境：
Pycharm
Python 3.9.16
安装：
pip install Flask==3.0.0
引用大屏模板的地址：
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
先看实际效果
实现原理
使用Flask框架构建大屏显示系统，主要实现步骤：
数据采集：通过API接口或者爬虫程序获取需要展示的数据。
数据处理：对采集到的数据进行处理，例如过滤、聚合、计算等操作，生成符合展示要求的数据。
数据存储：将处理后的数据存储到数据库或缓存中，以便后续查询和展示。
界面设计：根据需求设计大屏显示的页面，包括布局、样式、交互等。
数据展示：通过Flask框架提供的视图函数和模板引擎，将处理后的数据呈现在大屏上。
项目结构
新创建一个Flask项目，将选择的大屏模板源码对应的放入static和templates中，具体结构如下：
```结构Flask Big Screen├─static│ ├─css│ ├─hunan│ ├─images│ └─js├─templates│ └─index.html├─views│ ├─data_api.py│ └─land.py├─requirement└─.env```
（左右滑动查看完整代码）
主要代码
视图land.py
# -*- coding: utf-8 -*-from flask import Blueprint, render_templateland = Blueprint('admin', __name__)def index():data = {"data_base": {"total_confirmation_area": 1000,"total_circulation_area": 1500,"total_expect_area": 980},"data_middle": {"total_information": 9000,"today_information": 10,"total_transaction_money": 1234,"today_transaction_money": 0.3,"total_transaction_area": 2314,"today_transaction_area": 1.2}}return render_template('index.html', data=data)
（左右滑动查看完整代码）
返回的data，是作为打开index.html后显示的初始数据
数据接口data_api.py
import randomfrom flask import Blueprint, jsonify, requestdata_api = Blueprint('data_api', __name__)def middle_data_analysis():middle_data = {"source": {"total_information": 9897.56,"today_information": 16,"total_transaction_money": 1532.88,"today_transaction_money": 0.5,"total_transaction_area": 2130.26,"today_transaction_area": 1.4}}for key, value in middle_data['source'].items():if 'total' in key:middle_data['source'][key] = round(random.uniform(1000, 9000), 2)else:middle_data['source'][key] = round(random.uniform(1, 20), 2)return jsonify(middle_data)
（左右滑动查看完整代码）
代码中的middle_data，进行了一个随机数random.uniform的小处理，这个的目的是为大屏显示的数据可以更清晰地看到效果。（此data_api.py中的所有随机数的小处理，都是这个目的，不一一例举了，有兴趣的可以去看源码）
注意，在实际场景中是不会这么处理的，这些数据均是储存在数据库中的，大屏显示的数据基本上都是从数据库中读取的。
JS获取data_api.js
data_api.js位于static/hunan文件夹下
middle_data()setInterval(middle_data, 1000 * 2)function middle_data() {$.ajax({url: "/data_api/middle_data",success: function(data) {var total_information = data.source.total_information;var today_information = data.source.today_information;$("#total_information").text(total_information);$("#today_information").text(today_information);var total_transaction_money = data.source.total_transaction_money;var today_transaction_money = data.source.today_transaction_money;$("#total_transaction_money").text(total_transaction_money);$("#today_transaction_money").text(today_transaction_money);var total_transaction_area = data.source.total_transaction_area;var today_transaction_area = data.source.today_transaction_area;$("#total_transaction_area").text(total_transaction_area);$("#today_transaction_area").text(today_transaction_area);},error: function(xhr, type, errorThrown) {}})}
（左右滑动查看完整代码）
利用ajax请求服务，获取数据，其中setInterval(middle_data, 1000 * 2)指每2秒获取一次，即大屏显示的数据是每2秒更新一次。
大屏页面index.html
<div class="middle_top"><div class="middle_top_list"><div class="list_title">累计发布数</div><div class="list_num list_num1"><span class="counter-value" id="total_information">{{ data.data_middle.total_information }}</span>条</div><div class="today_list_font">今日最新发布<span id="today_information">{{ data.data_middle.today_information }}</span>条</div></div><div class="middle_top_list"><div class="list_title">累计交易金额</div><div class="list_num list_num2"><span class="counter-value" id="total_transaction_money">{{ data.data_middle.total_transaction_money }}</span>亿</div><div class="today_list_font">今日最新交易<span id="today_transaction_money">{{ data.data_middle.today_transaction_money }}</span>亿</div></div><div class="middle_top_list"><div class="list_title">累计交易面积</div><div class="list_num list_num3"><span class="counter-value" id="total_transaction_area">{{ data.data_middle.total_transaction_area }}</span>万亩</div><div class="today_list_font">今日交易面积<span id="today_transaction_area">{{ data.data_middle.today_transaction_area }}</span>万亩</div></div></div>
（左右滑动查看完整代码）
打开大屏默认获取的是视图land.py的初始数据。
启动运行
在自己电脑上启动，相当于研发环境，直接切换到venv下，输入：
flask --app app.py run -h 127.0.0.1 -p 5555 --debug出现以上日志信息说明已经启动成功！
接下来……
打开浏览器，输入：
http://127.0.0.1:5555/效果
实时更新，自动显示
手动点击，动态显示
总结
使用Flask框架构建的大屏显示系统具有高效、灵活和可扩展性强的特点，可以满足各种复杂的需求。无论是商业智能、监控预警还是信息发布等领域，都能够发挥出其独特的优势。未来随着技术的不断发展，相信大屏显示系统将会在更多领域得到广泛应用。
本次的大屏显示，只是一个雏形，接下来会结合前期的文章实践，进行数据采集、数据处理和数据存储，最终的数据展示，也会做相应的联动优化。
源码已整理：
有兴趣的朋友点个“赞”和“在看”，谢谢支持~！
后台回复“flask_big_screen”即可获取源码！
文章就分享到这儿，喜欢就点个赞吧!
