新手进阶Python：用Flask搭办公数据看板，浏览器随时看报表

大家好！我是CSDN的Python新手博主～上一篇我们给办公助手加了定时功能，能自动生成销售报表并发送邮件，但很多小伙伴反馈“每天的报表文件存在电脑里，找历史数据要翻文件夹，领导想看汇总数据也不方便”。今天就带来超落地的新手实战项目——用Flask搭建办公数据可视化看板！

本次用Python轻量Web框架Flask，把定时任务生成的Excel数据、销售额图表整合到网页中，实现3大核心功能：实时展示当日销售汇总数据、按日期查询历史报表、网页嵌入可视化图表。不用部署到服务器，本地运行后，同一局域网内的电脑（比如领导的电脑、同事的电脑）都能通过浏览器访问，数据分享和查看效率翻倍！全程代码复用之前的办公功能，注释详细，新手复制就能搭建，轻松从“文件式管理”升级到“网页式看板”～

一、本次学习目标

掌握轻量Web框架Flask的基础使用（路由配置、模板渲染、静态文件加载）；
学会将Excel数据、matplotlib图表整合到Web页面，实现数据可视化展示；
理解“本地Web服务”的运行逻辑，实现局域网内数据共享；
掌握网页中日期筛选功能的实现，支持历史报表查询；
能将看板与之前的定时任务联动，实现“自动生成数据→网页实时更新”。

二、前期准备

安装核心依赖库

安装Flask框架

pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple

确保之前的依赖库已安装（openpyxl、matplotlib）

pip install openpyxl matplotlib -i https://pypi.tuna.tsinghua.edu.cn/simple

准备数据与文件结构

办公数据看板/ # 主文件夹
├─ app.py # Flask核心代码（我们要写的）
├─ static/ # 静态文件文件夹（放图表、css样式）
│ └─ charts/ # 存放定时任务生成的图表
├─ templates/ # 模板文件夹（放网页HTML文件）
│ └─ dashboard.html # 看板网页（我们要写的）
└─ 每日销售报表/ # 定时任务生成的Excel报表
└─ 当日销售筛选结果.xlsx
└─ 2026-01-08销售筛选结果.xlsx # 历史报表（按日期命名）

关键：修改之前的定时任务代码，让生成的Excel和图表按“日期”命名（比如“2026-01-08销售筛选结果.xlsx”），这样后续才能按日期查询历史数据！文末会补充修改方法～

三、实战：搭建办公数据可视化看板

核心功能拆解

首页展示：自动加载当日销售汇总数据（各部门销售额、总销售额、达标订单数）；
图表展示：网页嵌入当日销售额柱状图，支持放大查看；
历史查询：通过日期选择器，查询任意一天的销售数据和图表；
数据导出：支持下载当前查看日期的Excel报表文件；
局域网共享：本地运行后，同一网络的电脑输入地址就能访问。

完整代码实现

（1）Flask核心代码（app.py）

-- coding: utf-8 --

from flask import Flask, render_template, request, send_file
import os
import datetime
from openpyxl import load_workbook
import matplotlib.pyplot as plt

====================== 全局配置 ======================

app = Flask(name) # 初始化Flask应用

路径配置（修改为你的实际路径）

EXCEL_REPORT_FOLDER = r"C:\Users\张三\Desktop\办公数据看板\每日销售报表" # Excel报表文件夹
CHART_FOLDER = r"C:\Users\张三\Desktop\办公数据看板\static\charts" # 图表文件夹（static目录下，Flask才能识别）
TODAY = datetime.date.today().strftime(“%Y-%m-%d”) # 今日日期（格式：2026-01-08）

解决matplotlib中文乱码

plt.rcParams[‘font.sans-serif’] = [‘SimHei’]
plt.rcParams[‘axes.unicode_minus’] = False

====================== 数据处理函数（复用+改造） ======================

def get_excel_data(date=TODAY):
“”“读取指定日期的Excel报表数据，返回汇总信息和详细数据”“”
# 拼接Excel文件路径（按日期命名）
excel_filename = f"{date}销售筛选结果.xlsx"
excel_path = os.path.join(EXCEL_REPORT_FOLDER, excel_filename)

if not os.path.exists(excel_path): return {"error": f"未找到{date}的销售报表"}, [] try: wb = load_workbook(excel_path) ws = wb.active # 读取表头和所有数据 headers = [cell.value for cell in ws[1]] data = [] for row in ws.iter_rows(min_row=2, values_only=True): if row[0] is not None: data.append(dict(zip(headers, row))) # 数据汇总（按部门统计销售额） dept_sales = {} total_sales = 0.0 qualified_orders = 0 # 销售额>2000的订单数 for item in data: dept = item.get("部门", "未知部门") sales = float(item.get("销售额", 0)) dept_sales[dept] = dept_sales.get(dept, 0) + sales total_sales += sales if sales > 2000: qualified_orders += 1 summary = { "date": date, "total_sales": round(total_sales, 2), # 总销售额（保留2位小数） "qualified_orders": qualified_orders, "dept_count": len(dept_sales), # 涉及部门数 "dept_sales": dept_sales # 各部门销售额 } return summary, data except Exception as e: return {"error": f"读取报表失败：{str(e)}"}, []

def get_chart_path(date=TODAY):
“”“获取指定日期的图表路径（用于网页展示）”“”
chart_filename = f"{date}部门销售额柱状图.png"
chart_path = os.path.join(CHART_FOLDER, chart_filename)
# 返回相对路径（Flask模板中需要相对路径）
return f"/static/charts/{chart_filename}" if os.path.exists(chart_path) else “”

def get_available_dates():
“”“获取所有可用的报表日期（用于历史查询下拉框）”“”
available_dates = []
if not os.path.exists(EXCEL_REPORT_FOLDER):
return available_dates
# 遍历文件夹，提取日期（从文件名中截取）
for filename in os.listdir(EXCEL_REPORT_FOLDER):
if filename.endswith(“.xlsx”) and “销售筛选结果” in filename:
# 截取日期部分（文件名格式：2026-01-08销售筛选结果.xlsx）
date_str = filename[:10]
try:
# 验证日期格式是否正确
datetime.datetime.strptime(date_str, “%Y-%m-%d”)
available_dates.append(date_str)
except:
continue
# 按日期倒序排列（最新的在前面）
available_dates.sort(reverse=True)
return available_dates

====================== Flask路由配置（网页访问入口） ======================

@app.route(“/”)
def dashboard():
“”“看板首页：展示当日数据”“”
# 获取用户选择的日期（默认今日）
selected_date = request.args.get(“date”, TODAY)
# 获取数据汇总和详细数据
summary, detail_data = get_excel_data(selected_date)
# 获取图表路径
chart_path = get_chart_path(selected_date)
# 获取所有可用的报表日期（用于下拉框）
available_dates = get_available_dates()

# 渲染网页模板，把数据传递给HTML return render_template( "dashboard.html", summary=summary, detail_data=detail_data, chart_path=chart_path, available_dates=available_dates, selected_date=selected_date )

@app.route(“/download”)
def download_excel():
“”“下载指定日期的Excel报表”“”
selected_date = request.args.get(“date”, TODAY)
excel_filename = f"{date}销售筛选结果.xlsx"
excel_path = os.path.join(EXCEL_REPORT_FOLDER, excel_filename)

if not os.path.exists(excel_path): return f"未找到{selected_date}的报表文件", 404 # 发送文件给浏览器（触发下载） return send_file( excel_path, as_attachment=True, download_name=excel_filename, mimetype="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" )

====================== 程序入口 ======================

ifname== “main”:
# 启动Flask服务：host="0.0.0.0"表示允许局域网内访问，port=5000是默认端口
app.run(host=“0.0.0.0”, port=5000, debug=True)

（2）网页模板代码（templates/dashboard.html）

销售数据可视化看板

<!-- 日期选择器 --> <div class="date-select"> <select id="dateSelect" onchange="window.location.href='/?date='+this.value"> {% for date in available_dates %} <option value="{{ date }}" {% if date == selected_date %}selected{% endif %}>{{ date }}</option> {% endfor %} </select> <a href="/download?date={{ selected_date }}" class="download-btn">下载当前报表&lt;/a&gt; &lt;/div&gt; <!-- 数据汇总卡片 --> {% if summary.error %} <div class="error">{{ summary.error }}</div> {% else %} <div class="summary-card"> <div class="card" style="background-color: #3498db;"> <h3>统计日期</h3> <div class="value">{{ summary.date }}</div> </div> <div class="card" style="background-color: #e74c3c;"> <h3>总销售额（元）</h3> <div class="value">{{ summary.total_sales }}</div> </div> <div class="card" style="background-color: #2ecc71;"> <h3>达标订单数</h3> <div class="value">{{ summary.qualified_orders }}</div> </div> <div class="card" style="background-color: #f39c12;"> <h3>涉及部门数</h3> <div class="value">{{ summary.dept_count }}</div> </div> &lt;/div&gt; <!-- 图表展示区域 --> <div class="chart-area"> <h2>各部门销售额分布</h2> {% if chart_path %} <img src="{{ chart_path }}" alt="部门销售额柱状图"> {% else %} <p style="color: #e74c3c;">未找到{{ summary.date }}的图表文件</p> {% endif %} &lt;/div&gt; <!-- 详细数据表格 --> <div class="data-table"> <h2>{{ summary.date }}销售详细数据</h2> <table> <thead> <tr> {% for key in detail_data.0.keys() %} <th>{{ key }}</th> {% endfor %} </tr> </thead> <tbody> {% for item in detail_data %} <tr> {% for value in item.values() %} <td>{{ value }}</td> {% endfor %} </tr> {% endfor %} </tbody> </table> </div> {% endif %} </div>

关键代码拆解（新手必看）

（1）Flask核心基础：路由与模板渲染

1. 路由配置：@app.route(“/”) 表示访问 http://localhost:5000/ 时执行dashboard函数

@app.route(“/”)
def dashboard():
# 2. 模板渲染：把数据传递给HTML文件，生成最终网页
return render_template(“dashboard.html”, 变量名=变量值)

（2）数据处理：按日期读取与汇总

文件命名规范：Excel和图表文件命名为“2026-01-08销售筛选结果.xlsx”“2026-01-08部门销售额柱状图.png”；
日期提取：遍历报表文件夹，从文件名中截取日期字符串，验证格式后生成可用日期列表；
数据汇总：读取Excel后，按部门统计销售额、计算总销售额和达标订单数，生成直观的汇总信息。

（3）网页与后端的数据交互

前端HTML：用下拉框展示所有可用日期，选择日期后通过window.location.href跳转到带日期参数的地址（比如/?date=2026-01-07）；
后端Flask：用request.args.get("date", TODAY)获取前端传递的日期参数；
重新渲染：根据获取的日期读取对应数据，重新渲染网页，展示选中日期的报表。

（4）局域网共享的关键配置

app.run(host=“0.0.0.0”, port=5000, debug=True)

（5）定时任务联动修改

原保存路径（固定名称）

SAVE_EXCEL_PATH = r"C:…\当日销售筛选结果.xlsx"

修改后（按日期命名）

TODAY = datetime.date.today().strftime(“%Y-%m-%d”)
SAVE_EXCEL_PATH = fr"C:…{TODAY}销售筛选结果.xlsx"
SAVE_CHART_PATH = fr"C:…{TODAY}部门销售额柱状图.png"

四、运行效果与使用方法

本地运行看板
按之前的文件结构，创建app.py、templates/dashboard.html和static/charts文件夹；
修改app.py中的路径配置（EXCEL_REPORT_FOLDER、CHART_FOLDER），确保指向你的报表和图表文件夹；
打开命令行，切换到“办公数据看板”主文件夹，执行命令：python app.py；
命令行显示“Running on http://192.168.1.105:5000/”，打开浏览器输入这个地址，就能看到看板网页。
核心功能使用

查看当日数据：打开网页默认显示今日销售汇总、图表和详细数据；
查询历史数据：通过下拉框选择历史日期，网页自动刷新显示对应日期的报表；
下载报表：点击“下载当前报表”按钮，自动下载选中日期的Excel文件；
共享访问：把命令行显示的地址发给同一网络的同事/领导，他们就能直接访问看板。

五、新手避坑小贴士

模板路径错误：必须把HTML文件放在templates文件夹下，static文件夹必须存放静态文件（图表、css），否则Flask无法识别；
端口被占用：如果启动时提示“Address already in use”，修改app.run的port参数（比如改成5001）；
局域网无法访问：检查两台电脑是否在同一WiFi/局域网，关闭防火墙，确保启动时设置了host="0.0.0.0"；
日期格式错误：确保Excel和图表文件的日期部分是“2026-01-08”格式，否则无法被看板识别；
中文乱码：Python代码开头加# -*- coding: utf-8 -*-，HTML文件指定charset="UTF-8"，matplotlib指定中文字体。