插件 〉班次选择器


开发者

Isa Ozler

注册以接收不定期产品新闻和更新



面板
社区

班次选择器

  • 概览
  • 安装
  • 更新日志
  • 相关内容

Grafana 班次选择器插件

license

班次选择器允许您将 Grafana 仪表盘的时间范围调整到特定的单个班次或多个班次。在本页面上,我们将向您展示其工作原理以及如何将显示的班次调整到特定的季节或生产线。

Shift selector

实时班次跟踪功能(新功能*)

借助这项新功能,您可以启用班次选择器根据本地时间自动跟踪班次。这样您就不必手动更改班次。要使用这项新功能,您需要在面板选项中启用它。

  • 启用“实时班次自动选择”
  • 确定刷新间隔(这些应符合 Grafana 的时间间隔模式。例如:5 秒 -> 5s,1 小时 -> 1h
  • (可选)如果您有多个组,请确定一个要自动选择的组。它使用 group_uuid

请注意,启用实时功能将隐藏日期和范围选择器

Shift selector Realtime

新的面板选项

  • Data Mapper 替代了变量 var_query_map
  • 简单的快速入门流程(无需变量)
  • 添加了图标映射器以匹配图标
  • 自定义日期选择标签。如果您想本地化或指定不同的标签,这将很有用。
  • 班次按钮的显示选项。
    • 通过此新选项,您可以将按钮显示为;
      • 仅文本
      • 仅图标
      • 或图标和文本,这是默认选项
  • 更改范围“开始-结束”、“开始”和“结束”标签。

快速入门(静态班次)

通过此插件,您可以选择动态(来自数据源)或静态班次。

要快速开始,请在 Data Mapper 面板中设置班次(组)

  • 将“从数据源加载班次”设为 false
  • 将下方所示的 json 作为示例复制粘贴
{
  "static": {
    "shifts": [
      {
        "group": "Group 1",
        "group_uuid": "group_uuid_1",
        "uuid": "shift_uuid_1",
        "label": "Morning Custom",
        "startTime": "06:00:00",
        "endTime": "14:00:00",
        "order": 1
      },
      {
        "group": "Group 2",
        "group_uuid": "group_uuid_2",
        "uuid": "shift_uuid_2",
        "label": "Afternoon Custom",
        "startTime": "14:00:00",
        "endTime": "22:00:00",
        "order": 1
      },
      {
        "group": "Group 2",
        "group_uuid": "group_uuid_2",
        "uuid": "shift_uuid_3",
        "label": "Night Custom",
        "startTime": "22:00:00",
        "endTime": "06:00:00",
        "order": 2
      }
    ]
  }
}

现在您可以看到两个组中的班次:组 1组 2。例如,这可以是夏季或冬季时间。

要从数据源设置班次,请继续阅读。

来自数据源的班次

功能

您可以选择的选项有:(从左到右)

  • 日期选择:选择您要设置班次的日期。
  • 选择您要更改的时间。行末的点表示您将更改开始时间、结束时间还是两者都更改
  • 班次(两个点):将仪表盘的时间选择更改为选定的班次。这将设置仪表盘的开始时间和结束时间。班次的开始时间和结束时间都显示在按钮中。 Shift selector
  • 开始时间(左边的点):仅将时间选择的开始时间更改为选定班次的开始时间。显示的时间是班次的开始时间。 Shift start time
  • 结束时间(右边的点):仅将时间选择的结束时间更改为选定班次的结束时间。显示的时间是班次的结束时间。 Shift end time

多个班次组

班次选择器还可以处理多个班次组,为了区分它们,这些组的名称会添加到按钮前面。但是,如果只有一个班次组可用,该名称将消失,如上面的示例所示。 Multiple shift groups

Grafana 中时间选择的更改

当您单击按钮时,选定的时间将更改为选定的班次时间。在此示例中,我们选择了两个季节性班次组:一个用于夏季,一个用于冬季。

组名班次名称班次顺序开始时间结束时间
夏季早上18:0014:00
夏季下午214:0022:00
夏季夜间322:008:00
冬季夜间122:3010:30
冬季白天210:3022:30

在此示例中,我们选择了 2021 年 5 月 17 日,从而得到以下班次时间

组名班次名称更新后的开始时间更新后的结束时间
夏季1. 早上5 月 17 日 8:005 月 17 日 14:00
夏季2. 下午5 月 17 日 14:005 月 17 日 22:00
夏季3. 夜间5 月 17 日 22:005 月 18 日 8:00
冬季1. 夜间5 月 16 日 22:305 月 17 日 10:30
冬季2. 白天5 月 17 日 10:305 月 17 日 22:30

加粗的日期属于跨午夜的班次。日期也相应更新。

警告:班次选择器只有在您的计算机位于正确的时区时才能正常工作。更改 Grafana 中的时区不会影响班次选择器的行为。

如何添加?

要添加班次选择器,您需要做两件事

  1. 创建 ShiftSelector 面板

  2. 创建一个隐藏变量,包含您想要显示的班次名称。为此,请转到“仪表盘设置”->“变量”->“添加新变量”。然后使用以下设置创建变量

    1. 数据库

      • 名称:var_shifts_dataModel
      • 类型:数据源
      • 隐藏:变量
      • 数据源
        • 类型:数据库类型
        • 实例名称过滤器:包含班次数据的数据源名称

      这将导致

      • 数据源将列在提交按钮上方的“值预览”中。
    2. 班次数据模型映射器

      • 名称:var_query_map
      • 类型:常量
      • 常量选项
        • 值:您可以在此处粘贴映射器对象。您可以在 var_query_map.example.js 文件中找到示例。您可以删除 static 值,因为您将从数据源获取它们。
          • 选项 JSON 对象
            • 项目
              • shift_groups:包含 shift_groups 表字段。您可以根据您的数据库方案更改 nameuuidsite_uuid 字段。
              • shifts:包含 shifts 表字段。根据您的数据库方案更改 uuidstart_timeend_timeordergroup_uuid
            • 查找
              • shifts:您的 shifts 表名称
              • shift_groups:您的班次组表名称
            • 模式
              • shifts(可选):您的 shifts 表数据库的命名空间
              • shift_groups(可选):您的班次组表数据库的命名空间
              • site_uuid(可选):如果您想选择特定站点
    3. 选项

      • 名称:var_shifts_options
      • 类型:查询
      • 隐藏:变量
      • 数据源:{{包含班次和班次组的数据库}}
      • 刷新:仪表盘加载时
      • 查询:选择与您的工厂相关的班次的查询。您还可以通过过滤班次组或生产线等来扩展查询(示例)。
      SELECT
         S.name AS '__text',
         S.uuid AS '__value'
      FROM shifts S
      

      这将导致: variable settings

*请注意,当您有多个班次组,其中包含同名班次时,班次的名称应唯一。如果两个班次组都有一个名为“morning”的班次,最简单的方法是通过在查询中的 AS '__text' 中添加班次顺序或班次组名称来使班次名称唯一,示例如下:

CONCAT(S.shift_order, '. ', S.name) AS '__text', -- to add the number of the order of the shift
CONCAT(SG.name, ' - ', S.name) AS '__text',  -- to add the shift group name

数据库:示例

  • 站点
CREATE TABLE `sites` (
  `uuid` varchar(22) NOT NULL,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`uuid`),
  UNIQUE KEY `name_UNIQUE` (`name`),
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
  • 班次组
CREATE TABLE `shift_groups` (
  `uuid` varchar(22) NOT NULL,
  `name` varchar(255) NOT NULL,
  `site_uuid` varchar(22) NOT NULL,
  PRIMARY KEY (`uuid`),
  UNIQUE KEY `site_uuid_name_UNIQUE` (`site_uuid`,`name`),
  KEY `shift_group_site_uuid_idx` (`site_uuid`),
  CONSTRAINT `shift_group_site_uuid` FOREIGN KEY (`site_uuid`) REFERENCES `sites` (`uuid`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
  • 班次
CREATE TABLE `shifts` (
  `uuid` varchar(22) NOT NULL,
  `name` varchar(255) NOT NULL COMMENT 'Name or description of shift',
  `shift_order` int NOT NULL COMMENT 'Order of the shifts on a operational day for the shift_group_uuid as referenced by shift_group_uuid',
  `start_time` time NOT NULL COMMENT 'The time that the shift starts (local timezone)',
  `end_time` time NOT NULL COMMENT 'The time that the shift ends (local timezone)',
  `shift_group_uuid` varchar(22) NOT NULL COMMENT 'Uuid of the shift group',
  PRIMARY KEY (`uuid`),
  UNIQUE KEY `name_group_uuid_UNIQUE` (`shift_group_uuid`,`name`),
  UNIQUE KEY `order_group_uuid_UNIQUE` (`shift_group_uuid`,`shift_order`),
  UNIQUE KEY `start_time_group_uuid_UNIQUE` (`shift_group_uuid`,`start_time`),
  UNIQUE KEY `end_time_group_uuid_UNIQUE` (`shift_group_uuid`,`end_time`),
  KEY `shifts_group_uuid_idx` (`shift_group_uuid`),
  CONSTRAINT `shifts_shift_group_uuid_fk` FOREIGN KEY (`shift_group_uuid`) REFERENCES `shift_groups` (`uuid`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

附录:过滤查询

如果您想过滤显示的班次,例如过滤到某个班次组或属于某条生产线,您可以在仪表盘中添加额外的变量,并在变量 shifts_options 中实现它们。下面描述了两个示例,其中生产线示例已在一些全局仪表盘中实现。

生产线过滤

创建一个变量以选择生产线(或工作中心)

  • 变量名称:work center

  • 查询:(将 example01 更新为您的工厂代码)

    SELECT
        WC.name AS '__text',
        WC.uuid AS '__value'
    FROM work_centers WC
    LEFT JOIN sites SI ON SI.uuid = WC.site_uuid
    WHERE SI.code = 'example01'
    
  • shifts_options 的查询更新为

    SELECT
        S.name AS '__text',
        S.uuid AS '__value'
    FROM shifts S
    LEFT JOIN shift_groups SG ON SG.uuid = S.shift_group_uuid
    LEFT JOIN work_center_has_shift_groups WCHSG ON WCHSG.work_center_uuid = ${work_center}
    

班次组过滤

创建一个变量以选择班次组

  • 变量名称:shifts_group

  • 查询:(将 example01 更新为您的工厂站点代码)

    SELECT
        SG.name AS '__text',
        SG.uuid AS '__value'
    FROM shift_groups SG
    LEFT JOIN sites SI ON SI.uuid = SG.site_uuid
    WHERE SI.code = 'example01'
    
  • shifts_options 的查询更新为

    SELECT
        S.name AS '__text',
        S.uuid AS '__value'
    FROM shifts S
    LEFT JOIN shift_groups SG ON SG.uuid = S.shift_group_uuid
    WHERE SG.uuid = ${shift_group}
    

在 Grafana Cloud 上安装班次选择器

欲了解更多信息,请访问关于插件安装的文档。

更新日志

0.1.6

  • 发布工作文件已更新以适应更新的 Grafana 签名流程
  • 修复问题 #28 的问题
    • 在 Grafana 10 版本中,由于 fetch API 的更改,插件无法正确检索和设置班次和选项
  • 修复问题 #26 的问题
    • 即使警告已设置,useEffect 也会被触发。
  • 软件包已更新
  • 静态数据错误修复
  • Grafana 版本升级 (11.0.0)

0.1.5

  • 修复问题 #28 的问题
    • 班次更改后传递刷新参数。

0.1.3 - 0.1.4

  • 修复问题 #16 的问题
    • 自定义间隔,用于在分离的重新加载检查中保留其他仪表盘面板
  • Grafana 审查修复
    • 修复了阻塞的面板更新,以避免内存泄漏
    • 剩余的已弃用 window.location.search

0.1.2

  • 修复问题 #16 的问题
    • 修复了 groupUUID 字段。如果未提供,则自动选择。
    • 修复了中断的刷新率。添加了自定义刷新率输入,以强制仪表盘按首选速率刷新。
  • 添加了进度条以可视化刷新率
  • 已弃用的位置服务已替换

0.1.1

  • 修复了审查中的错误
    • 已移除 Grafana css 类
    • 在仪表盘模式下阻止多个班次选择器面板,以防止无限循环
  • 添加了额外选项
    • 隐藏日期范围按钮的功能
  • UI 错误修复
    • 图标与标签重叠
    • 生产日期高度偏移

0.1.0

  • 实时功能错误已修复
  • 添加了标签本地化功能
  • 重构
  • 面板属性已优化

0.0.3

添加了实时班次功能和额外的面板选项,以自定义面板。例如更改标签和显示类型。

0.0.2

添加静态班次的功能

0.0.1

初始发布。