农业数字孪生大屏网页 html开源

「14-农业数字孪生大屏网页」

链接：https://pan.quark.cn/s/f00c38e60761

智慧农业数字孪生可视化平台

一个面向智慧农业场景的 16:9 数据大屏原型。项目采用原生 HTML、CSS 和 JavaScript 实现，无需安装前端依赖或执行构建命令，可直接部署为静态页面。

项目特点

• 1600 × 900 标准大屏画布，可根据浏览器窗口等比例缩放。

• 深海军蓝与青蓝 HUD 视觉体系，面板、标题框、按钮和导航风格统一。

• 中央数字孪生农场主视觉，包含农田、村庄、温室、水域和灌溉设施。

• 土地概览、作物分布、病虫害预警、气象监测、灌溉任务和设备状态等业务模块。

• 灌溉、施肥、病虫害防控和采收建议等决策支持信息。

• 农场热点悬停提示、区域选择、导航切换和按钮反馈等交互效果。

• 实时时钟，以及用于演示的温度、湿度动态数据。

• 单文件页面结构，方便演示、交付和二次开发。

快速开始

方式一：直接打开

双击以下文件即可预览：

outputs/digital_twin_agriculture_dashboard.html

方式二：启动本地静态服务器（推荐）

在项目根目录运行：

python -m http.server 8765 --directory outputs

然后访问：

http://127.0.0.1:8765/digital_twin_agriculture_dashboard.html

如果端口 8765 已被占用，可以替换成其他空闲端口。

目录结构

.
├─ README.md
├─ outputs/
│  ├─ digital_twin_agriculture_dashboard.html   # 当前交付页面
│  ├─ smart_agriculture_digital_twin_hero.png   # 中央农场主视觉
│  ├─ digital_twin_dashboard_bottom_button_fixed.png
│  │                                             # 最终验收截图
│  ├─ BBT_UI素材提示词.md                         # BBT 素材生成提示词
│  ├─ hud_assets/                                # HUD 素材与提示词存档
│  └─ *.png / *副本.html                          # 过程预览和历史备份
└─ work/
   └─ imagegen/                                  # 图像生成过程文件

当前页面实际依赖：

outputs/digital_twin_agriculture_dashboard.html
outputs/smart_agriculture_digital_twin_hero.png

hud_assets 和 work/imagegen 中的文件主要用于保留素材生成过程。当前面板框、标题框、导航和图标主要由 CSS 与内联 SVG 绘制，以保证比例准确和不同模块之间的风格一致。

页面模块

区域	模块	说明
顶部	平台标题、时间、天气、用户信息	展示平台身份及基础状态
左侧	土地概览	展示种植面积及土地类型占比
左侧	作物分布	展示水稻、玉米和蔬菜种植面积
左侧	病虫害预警	展示风险等级、区域和防治建议
中央	数字孪生农场	展示农业场景、区域标记和交互热点
中下	决策支持	展示灌溉、施肥、防控和采收建议
右侧	气象监测	展示温度、湿度、风速、气压和预报
右侧	灌溉任务	展示任务完成率及下次灌溉时间
右侧	在线设备	展示设备总数、在线率和离线状态
底部	功能导航	提供首页、地块、生产、设备、预警和设置入口

交互说明

• 将鼠标移到中央农场的发光热点上，可查看对应区域的实时信息。

• 点击热点可选中该区域，并显示操作反馈。

• 点击"查看详情""查看建议""设备管理"等按钮，会弹出操作提示。

• 点击底部导航项可切换当前激活状态。

• 底部中央菱形按钮为数字孪生入口，已设置独立导航槽位，不会遮挡上方决策面板。

技术实现

• HTML5 语义化布局

• CSS Grid、Flexbox、渐变、裁切路径和阴影效果

• 内联 SVG 图标

• 原生 JavaScript 事件与数据演示

• 固定 1600 × 900 设计稿配合等比缩放适配

• 本地 PNG 主视觉素材

项目未使用第三方框架、在线字体、CDN 或外部接口，因此适合内网环境和离线演示。

二次开发

修改平台文案

在 outputs/digital_twin_agriculture_dashboard.html 中搜索对应中文内容即可修改标题、数据和模块名称。

替换中央农场素材

替换以下文件，并保持文件名不变：

outputs/smart_agriculture_digital_twin_hero.png

推荐使用透明背景 PNG，主体居中，画布比例接近 16:9，并在四周保留适量留白。

调整主题颜色

页面顶部的 :root 中定义了主要颜色变量：

--bg: #020918;
--cyan: #39ddff;
--blue: #208cff;
--green: #48e79c;
--yellow: #ffd95a;
--red: #ff6376;

修改这些变量即可统一调整背景、强调色、正常状态和告警状态。

接入真实数据

当前数据为静态演示数据。接入后端接口时，可将页面底部脚本中的模拟更新逻辑替换为 fetch、WebSocket 或项目现有的数据请求方法，并定向更新对应 DOM 元素。

素材生成

用于 BBT 中转站的 UI 素材提示词保存在：

outputs/BBT_UI素材提示词.md

再次生成素材时，建议保持以下设计约束：

• 深海军蓝背景与青蓝色 HUD 光效。

• 避免紫红霓虹、过度发光和赛博朋克城市元素。

• UI 框必须严格匹配目标容器比例，不在位图中生成文字。

• 同一批素材保持一致的线宽、切角、亮度和透明度。

• 生成后应在 1600 × 900 页面中实际截图验收，而不是只查看单张素材。

浏览器兼容性

建议使用最新版 Chrome、Edge 或其他 Chromium 内核浏览器。页面使用了 clip-path、CSS 渐变和 SVG 等现代浏览器特性，不建议使用 Internet Explorer。

当前验收状态

• 验收分辨率：1600 × 900

• 页面完整显示，无横向或纵向滚动条

• 底部中央按钮与决策面板无重叠

• 浏览器控制台无警告、无错误