更新时间:2023-12-25 GMT+08:00
分享

组件

组件承载着编辑器的核心功能,通过对组件的数据绑定、样式设置或交互动作,最终完成大屏的多样化设计和功能需求开发。

基础组件

  1. 文字

应用示例:使用文字组件设置页面标题。

图1 文字-1

添加组件:在左侧组件列表中,找到“文字”组件,将该组件拖到画布中。

图2 文字-2

配置样式:可在右侧配置栏中设置文字样式:文本内容、颜色、字号。

  1. 矩形

应用示例:作为数字或文字的背景。

图3 矩形-1

添加组件:在左侧组件列表中,找到“矩形”组件,将该组件拖到画布中。

图4 矩形-2

配置样式:可在右侧配置栏中,设置矩形的圆角、填充颜色和边框样式。

  1. 圆形

应用示例:作为数字或文字的背景。

图5 圆形-1

添加组件:在左侧组件列表中,找到“圆形”组件,将该组件拖到画布中。

图6 圆形-2

配置样式:可在右侧配置栏中,设置圆形的填充颜色和边框样式。

  1. 三角形

应用示例:作为数字或文字的背景。

图7 三角形-1

添加组件:在左侧组件列表中,找到“三角形”组件,将该组件拖到画布中。

图8 三角形-2

配置样式:可在右侧配置栏中,设置三角形的背景颜色和边框样式。

  1. 箭头

应用示例:作为表达各组件或区块之间传递关系的标记。

图9 箭头-1

添加组件:在左侧组件列表中,找到“箭头”组件,将该组件拖到画布中。

图10 箭头-2

配置样式:可在右侧配置栏中,设置箭头的填充颜色和边框样式。

  1. 图片

应用示例:图片组件主要用于在页面中展示图片资源,例如某些元素的背景,整厂布局图等。

图11 图片-1

添加组件:在左侧组件列表中,找到“图片”组件,将该组件拖到画布中。

图12 图片-2

上传图片:在右侧配置栏,单击上传图片,上传本地图片。

  1. 标题背景

应用示例:用于装饰页面标题。

图13 标题背景-1

添加组件:在左侧组件列表中,找到“标题背景”组件,将该组件拖到画布中。

图14 标题背景-2

  1. 背景

应用示例:用于装饰页面。

图15 背景-1

添加组件:在左侧组件列表中,找到“背景”组件,将该组件拖到画布中。

图16 背景-2

监测与控制

  1. 监测参数

应用示例:用于设备数据的实时展示,可关联设备组属性参数和设备参数。

图17 监测参数-1

添加组件:在左侧组件列表中,找到“监测参数”组件,将该组件拖到画布中。

图18 监测参数-2

配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择设备组属性参数或者设备参数,单击保存,完成数据配置。

图19 监测参数-3

配置样式:在右侧配置栏,可对监测参数的样式进行配置。选中整个组件,可对整个组件的字体大小和颜色进行设置。分别选中参数名称、单位或参数值,可分别对参数名称、单位或参数值进行字体大小和颜色设置。

  1. 状态监测

应用示例:状态监测类的参数,可为不同的参数值设置不同的颜色。例如:设备的运行状态设置为当运行时显示绿色,当停机时显示蓝色等。

图20 状态监测-1

添加组件:在左侧组件列表中,找到“状态监测”组件,将该组件拖到画布中。

图21 状态监测-2

配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择设备参数,单击保存,完成数据配置。

图22 状态监测-3

配置样式:配置完数据源之后,右侧配置栏中会自动带出状态值的配置选项,可对不同状态值设置不同的字号和颜色。

图23 状态监测-4

  1. 参数块

应用示例:把同一个设备的多个参数放到参数块中,方便查看和对比设备的实时数据。当该设备运行时,参数块会显示绿色,当设备停机时参数块会显示蓝色,当设备保养到期时参数块会显示黄色,当设备有异常预警时参数块会显示黄色,当设备发生故障时参数块会显示红色,方便设备管理人员快速感知到设备当前的状态。

图24 参数块-1

添加组件:在左侧组件列表中,找到“参数块”组件,将该组件拖到画布中。

图25 参数块-2

配置数据源:可在右侧配置栏中,选择设备组-设备,对参数块进行数据源配置。

配置样式:可在右侧配置栏中,对参数块头部和底部的高度,以及文本内容进行字体大小和颜色进行设置。

图26 参数块-3

系统控件

  1. 设备状态统计

设备状态统计有6个组件,分别为“运行状态统计”、“停机状态统计”、“离线状态统计”、“故障状态统计”、“智控状态统计”、“保养到期统计”。在这小节介绍中,将介绍前面5个,最后一个“保养到期统计”请看下一个小节。

应用示例:统计所选设备类型当前分别处于运行、停机、故障、离线、智控状态的设备数量。

图27 设备状态统计-1

添加组件:在左侧组件列表中,找到“运行状态统计”、“停机状态统计”、“离线状态统计”、“故障状态统计”、“智控状态统计”的组件,分别将它们拖入画布中。

图28 设备状态统计-2

配置数据源:可在右侧配置栏中,选择设备组-设备类型,分别对“运行状态统计”、“停机状态统计”、“离线状态统计”、“故障状态统计”、“智控状态统计”进行数据源配置。

配置样式:可在右侧配置栏中,对设备状态的图标大小、图表颜色、状态文本内容、文本字号、文本颜色、数值字号和数值颜色进行设置。

图29 设备状态统计-3

  1. 保养到期统计

应用示例:统计设备保养到期、剩7天、剩15天、剩30天的设备数量,有助于提前规划设备保养工作。

图30 保养到期统计-1

添加组件:在左侧组件列表中,找到“保养到期统计”组件,将该组件拖到画布中。

图31 保养到期统计-2

配置数据源:可在右侧配置栏中,选择设备组-设备类型,对保养到期统计进行数据源配置。

配置样式:可在右侧配置栏中,对保养到期统计的标题内容、标题字体大小、数值字体大小、时间字体大小等进行设置。

图32 保养到期统计-3

  1. 累计收益

应用示例:用于统计系统收益,参考使用云智控系统前的用电单耗,从使用云智控系统开始到现在,共节省了多少电量、电费或二氧化碳。

图33 累计收益-1

添加组件:在左侧组件列表中,找到“累计收益”组件,将该组件拖到画布中。

图34 累计收益-2

配置数据源:可在右侧配置栏中,选择设备组进行数据源配置,还可以选择累计收益类型,可选择展示累计节省电量、节省电费或者累计节省二氧化碳。

配置样式:在右侧配置栏中,可以对累计收益各项文本的字体大小和颜色等进行设置。

图35 累计收益-3

  1. 能效等级

应用示例:用来展示空压站的能效等级。

图36 能效等级-1

添加组件:在左侧组件列表中,找到“能效等级”组件,将该组件拖到画布中。

图37 能效等级-2

配置数据源:在右侧配置栏中,选择设备组进行数据源配置。

配置样式:可在右侧配置栏中,对能效等级的标题内容、标题字体大小、标题字体颜色等进行设置。

图38 能效等级-3

  1. 异常报警列表

应用示例:用来展示系统和设备7天内未解决的异常报警信息,包括智控预警、设备保养、设备故障、设备预警的消息。

图39 异常报警列表-1

添加组件:在左侧组件列表中,找到“异常报警列表”组件,将该组件拖到画布中。

图40 异常报警列表-2

配置数据源:在右侧配置栏中,选择设备组进行数据源配置。

配置样式:可在右侧配置栏中,对异常报警列表的背景颜色、标题样式、内容样式等进行设置。

图41 异常报警列表-3

图表

  1. 数值

应用示例:可统计今天/昨天/本月/上月的数据,例如:统计今天/昨天/本月/上月空压站房的耗电量。

添加组件:在左侧组件列表中,找到“数值”组件,将该组件拖到画布中。

图42 数值-1

配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,选择统计周期-今天/昨天/本月/上月,单击保存,完成数据配置。

图43 数值-2

配置样式:在右侧配置栏,可对统计的数值样式进行配置。选中整个组件,可对整个组件的字体大小和颜色进行设置。分别选中参数名称、单位或参数值,可分别对参数名称、单位或参数值进行字体大小和颜色设置。

  1. 曲线图

应用示例:曲线图组件以折线或曲线形式展示多条数据变动趋势,方便您分析比较数据的变动情况。可按小时/天/月的周期进行数据统计和展示,例如,展示多个空压站房近7天每天的用电单耗。

图44 曲线图-1

添加组件:在左侧组件列表中,找到“曲线图”组件,将该组件拖到画布中。

图45 曲线图-2

配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,最多可选择5个。选择统计周期-按小时/按天/按月进行数据统计。还可以选择是否在曲线上显示最大值、最小值、平均值。单击保存,完成数据配置。

图46 曲线图-3

配置样式:可在右侧配置栏中,对曲线图组件进行样式设置。

表1 曲线图样式设置

全局样式

是否展示数据点、曲线是否平滑、曲线底部距离

标题

设置标题内容、字体大小和字体颜色

图例

设置图例字体大小和字体颜色

X轴设置

设置X轴刻度上的字体大小和字体颜色

Y轴设置

设置Y轴最小值和最小值控制曲线的变化幅度,设置Y轴刻度上的字体大小和字体颜色

  1. 柱状图

应用示例:柱状图组件以柱状形式展示多条数据变动趋势,方便您分析比较数据的变动情况。可按小时/天/月的周期进行数据统计和展示,例如,展示多个空压站房近7天每天的耗电量。

图47 柱状图-1

添加组件:在左侧组件列表中,找到“柱状图”组件,将该组件拖到画布中。

图48 柱状图-2

配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,最多可选择5个。选择统计周期-按小时/按天/按月进行数据统计。还可以选择是否在柱状图上显示最大值、最小值、平均值。单击保存,完成数据配置。

图49 柱状图-3

配置样式:可在右侧配置栏中,对柱状图组件进行样式设置。

表2 柱状图样式设置

全局样式

是否展示数据点、曲线底部距离

标题

设置标题内容、字体大小和字体颜色

图例

设置图例字体大小和字体颜色

X轴设置

设置X轴刻度上的字体大小和字体颜色

Y轴设置

设置Y轴最小值和最小值控制曲线的变化幅度,设置Y轴刻度上的字体大小和字体颜色

  1. 实时曲线

应用示例:实时曲线图组件以折线或曲线形式展示多条实时数据变动趋势,方便您分析比较数据的变动情况。可展示近30分钟、近1个小时的实时数据,例如,展示多个空压站房近30分钟的瞬时流量。

图50 实时曲线-1

添加组件:在左侧组件列表中,找到“实时曲线”组件,将该组件拖到画布中。

图51 实时曲线-2

配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,最多可选择5个。选择展示周期-近30分钟/近1个小时。还可以选择是否在曲线上显示最大值、最小值、平均值。单击保存,完成数据配置。

图52 实时曲线-3

配置样式:可在右侧配置栏中,对实时曲线组件进行样式设置。

表3 实时曲线样式设置

全局样式

是否展示数据点、曲线是否平滑、曲线底部距离

标题

设置标题内容、字体大小和字体颜色

图例

设置图例字体大小和字体颜色

X轴设置

设置X轴刻度上的字体大小和字体颜色

Y轴设置

设置Y轴最小值和最小值控制曲线的变化幅度,设置Y轴刻度上的字体大小和字体颜色

相关文档