网站导航
← 返回实操课程
实操课程 / 第 4 章,共 8 章

制作一个运维大屏

把实时指标与列表组织成可读的大屏,先验证数据结构,再完成运行入口。

完成后你将得到

一个包含指标、趋势或列表的大屏,数据刷新、空状态和运行入口都经过检查。

开始前准备

  • 已安装 PlgBigScreen,能打开 /bigscreen 项目列表。
  • 准备一份可访问的数据源及实际响应样例;业务 SQL 数据集先在 DynamicData 中验证。

01 · 先规划读屏顺序

  1. 确定三个最重要的指标,例如设备在线数、异常数、当前负荷;单位与统计口径写在清单里。
  2. 新建工程,按目标屏幕比例放置顶部指标、中间趋势、底部异常列表。不要先堆满装饰组件。
预期结果

观看者能迅速找到当前状态与异常入口。

02 · 核对数据结构

  1. 先在数据源或数据集页面执行预览,记录字段名、数据类型和时间字段。
  2. 在组件的数据配置中选择当前支持的数据源,按实际响应路径映射字段;列表和图表需核对数组层级。
  3. 设置合理刷新周期,检查失败与空数据时的显示。凭据由服务端数据源配置管理。
预期结果

组件预览能使用实际返回字段,不依赖写死的示例数据。

03 · 完成交互与视觉检查

  1. 统一标题层级、数值单位和时间范围,确认曲线与指标使用相同统计口径。
  2. 需要跳转时关联已存在且有权限的运行视图;在目标分辨率检查文字、遮挡和滚动。
预期结果

大屏能解释指标含义,交互进入正确视图。

04 · 保存并验证运行入口

  1. 保存工程,重新打开确认数据配置仍存在,再从插件支持的预览/运行入口打开。
  2. 配置导航视图时关联该已保存工程的实际 ID,不把工程显示名当成任意文件路径。
  3. 用查看账号持续观察几个刷新周期,并验证数据源空结果与恢复。
预期结果

运行页面可刷新,空结果不会继续伪装成最新正常数据。

制作一个运维大屏
界面参考。截图中的工程与数值为示例,可用功能以实际部署版本为准。
本章验收

亲自验证后再勾选,进度仅保存在当前浏览器。

已完成 0 / 3

遇到问题,先检查这里

图表有框无数据

检查数据是否为数组、字段大小写、响应路径和时间格式;先用一个指标组件隔离问题。

列表能打开但运行页找不到工程

检查项目 ID、保存结果、视图关联与账号权限,使用项目列表提供的运行入口核对。

进一步查阅