白云山林业信息可视化大屏功能解说

本页用于汇报大屏的业务功能、交互控件和前端实现方法。大屏围绕森林资源、水源涵养、生物多样性、巡护调度和AI研判组织信息，让领导能在一屏内快速判断生态态势、风险位置和下一步处置动作。

一屏总览控件联动巡护研判前端驱动

生态健康指数 92

负氧离子 12,600

云海观测 今日 1 次

巡护覆盖 87%

生态总览：把分散指标压缩成一屏判断

中心区域用白云山地形图承载主视觉，通过生态健康指数、核心指标和重点区域点位，把领导最关心的“现在整体好不好、哪里需要看、下一步做什么”放在同一视线范围内。

总览态势

顶部时间、天气、位置和海拔信息建立汇报现场感，中部主指标负责快速给出生态健康判断。

指标趋势

底部小趋势卡展示碳汇、舒适度、游客影响和设备在线率，用简短趋势线表达变化方向。

区域联动

地图点位可切换巡护区域，联动告警、AI回复和主动路线，让大屏具备可讲解的交互路径。

告警闭环

底部告警条和抽屉面板模拟“发现问题、派发巡护、处置归档”的业务闭环。

功能实现流程从数据到界面

结构化数据模型

把森林资源、水源、物种、告警、巡护路线和问答内容整理成前端数据对象，便于统一渲染和后续接口替换。

组件化区域渲染

页面拆成顶部状态栏、左侧指标、中心态势、右侧AI助手、底部告警五类模块，保持汇报动线清晰。

交互事件驱动

通过 data-* 属性绑定按钮、卡片和地图点位，点击后更新选中态、AI文案、告警内容和提示反馈。

自适应大屏适配

按 1600 × 900 的大屏画布设计，再根据浏览器视口计算缩放比例，保证投屏、笔记本和浏览器窗口都能完整显示。

前端技术栈轻量部署

HTML 语义结构

用 section、article、aside 组织汇报模块，便于维护和讲解。

CSS 大屏视觉

使用 Grid、Flex、渐变、透明面板和背景图打造科技林业大屏。

原生 JavaScript

负责渲染模板、切换状态、处理问答、告警抽屉和提示消息。

Tabler Icons

统一树木、水源、巡护、设备和AI图标，让各模块识别更快。

算法与研判表达面向汇报的可解释逻辑

生态健康指数 森林覆盖 + 水源涵养 + 生物多样性 + 巡护覆盖

把多个生态指标转化成一个总分，便于领导先看总体状态，再看细项原因。

巡护优先级 风险指数 + 点位等级 + 覆盖缺口 + 时间窗口

地图点位切换后，系统给出当前区域的巡护建议，形成可执行的下一步动作。

趋势线归一化 (当前值 - 最小值) / 波动范围

小趋势图不追求复杂图表库，而是用轻量 SVG 把变化方向快速表达出来。

问答意图匹配 关键词识别 -> 主题分类 -> 策略回复

AI助手根据火险、巡护、碳汇、水源等关键词输出对应研判内容，适合汇报演示中的即时问答。

后续扩展方向

当前前端已经把数据结构、交互控件和汇报逻辑拆开，后续可平滑接入传感器接口、GIS地图服务、巡护工单系统和模型服务，把同一套界面升级为实时运行平台。