组件
组件承载着编辑器的核心功能,通过对组件的数据绑定、样式设置或交互动作,最终完成大屏的多样化设计和功能需求开发。
基础组件
- 文字
应用示例:使用文字组件设置页面标题。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799891705.png)
添加组件:在左侧组件列表中,找到“文字”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799770709.png)
配置样式:可在右侧配置栏中设置文字样式:文本内容、颜色、字号。
- 矩形
应用示例:作为数字或文字的背景。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112637.png)
添加组件:在左侧组件列表中,找到“矩形”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954008.png)
配置样式:可在右侧配置栏中,设置矩形的圆角、填充颜色和边框样式。
- 圆形
应用示例:作为数字或文字的背景。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112920.png)
添加组件:在左侧组件列表中,找到“圆形”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953633.png)
配置样式:可在右侧配置栏中,设置圆形的填充颜色和边框样式。
- 三角形
应用示例:作为数字或文字的背景。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112641.png)
添加组件:在左侧组件列表中,找到“三角形”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954012.png)
配置样式:可在右侧配置栏中,设置三角形的背景颜色和边框样式。
- 箭头
应用示例:作为表达各组件或区块之间传递关系的标记。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112924.png)
添加组件:在左侧组件列表中,找到“箭头”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953637.png)
配置样式:可在右侧配置栏中,设置箭头的填充颜色和边框样式。
- 图片
应用示例:图片组件主要用于在页面中展示图片资源,例如某些元素的背景,整厂布局图等。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112645.png)
添加组件:在左侧组件列表中,找到“图片”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954016.png)
上传图片:在右侧配置栏,单击上传图片,上传本地图片。
- 标题背景
应用示例:用于装饰页面标题。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112936.png)
添加组件:在左侧组件列表中,找到“标题背景”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953641.png)
- 背景
应用示例:用于装饰页面。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112649.png)
添加组件:在左侧组件列表中,找到“背景”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954020.png)
监测与控制
- 监测参数
应用示例:用于设备数据的实时展示,可关联设备组属性参数和设备参数。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112940.png)
添加组件:在左侧组件列表中,找到“监测参数”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953645.png)
配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择设备组属性参数或者设备参数,单击保存,完成数据配置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112653.png)
配置样式:在右侧配置栏,可对监测参数的样式进行配置。选中整个组件,可对整个组件的字体大小和颜色进行设置。分别选中参数名称、单位或参数值,可分别对参数名称、单位或参数值进行字体大小和颜色设置。
- 状态监测
应用示例:状态监测类的参数,可为不同的参数值设置不同的颜色。例如:设备的运行状态设置为当运行时显示绿色,当停机时显示蓝色等。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954024.png)
添加组件:在左侧组件列表中,找到“状态监测”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112960.png)
配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择设备参数,单击保存,完成数据配置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953669.png)
配置样式:配置完数据源之后,右侧配置栏中会自动带出状态值的配置选项,可对不同状态值设置不同的字号和颜色。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112681.png)
- 参数块
应用示例:把同一个设备的多个参数放到参数块中,方便查看和对比设备的实时数据。当该设备运行时,参数块会显示绿色,当设备停机时参数块会显示蓝色,当设备保养到期时参数块会显示黄色,当设备有异常预警时参数块会显示黄色,当设备发生故障时参数块会显示红色,方便设备管理人员快速感知到设备当前的状态。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954048.png)
添加组件:在左侧组件列表中,找到“参数块”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112968.png)
配置数据源:可在右侧配置栏中,选择设备组-设备,对参数块进行数据源配置。
配置样式:可在右侧配置栏中,对参数块头部和底部的高度,以及文本内容进行字体大小和颜色进行设置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953681.png)
系统控件
- 设备状态统计
设备状态统计有6个组件,分别为“运行状态统计”、“停机状态统计”、“离线状态统计”、“故障状态统计”、“智控状态统计”、“保养到期统计”。在这小节介绍中,将介绍前面5个,最后一个“保养到期统计”请看下一个小节。
应用示例:统计所选设备类型当前分别处于运行、停机、故障、离线、智控状态的设备数量。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112693.png)
添加组件:在左侧组件列表中,找到“运行状态统计”、“停机状态统计”、“离线状态统计”、“故障状态统计”、“智控状态统计”的组件,分别将它们拖入画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954060.png)
配置数据源:可在右侧配置栏中,选择设备组-设备类型,分别对“运行状态统计”、“停机状态统计”、“离线状态统计”、“故障状态统计”、“智控状态统计”进行数据源配置。
配置样式:可在右侧配置栏中,对设备状态的图标大小、图表颜色、状态文本内容、文本字号、文本颜色、数值字号和数值颜色进行设置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112972.png)
- 保养到期统计
应用示例:统计设备保养到期、剩7天、剩15天、剩30天的设备数量,有助于提前规划设备保养工作。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953685.png)
添加组件:在左侧组件列表中,找到“保养到期统计”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112697.png)
配置数据源:可在右侧配置栏中,选择设备组-设备类型,对保养到期统计进行数据源配置。
配置样式:可在右侧配置栏中,对保养到期统计的标题内容、标题字体大小、数值字体大小、时间字体大小等进行设置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954064.png)
- 累计收益
应用示例:用于统计系统收益,参考使用云智控系统前的用电单耗,从使用云智控系统开始到现在,共节省了多少电量、电费或二氧化碳。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112976.png)
添加组件:在左侧组件列表中,找到“累计收益”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953689.png)
配置数据源:可在右侧配置栏中,选择设备组进行数据源配置,还可以选择累计收益类型,可选择展示累计节省电量、节省电费或者累计节省二氧化碳。
配置样式:在右侧配置栏中,可以对累计收益各项文本的字体大小和颜色等进行设置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112701.png)
- 能效等级
应用示例:用来展示空压站的能效等级。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954068.png)
添加组件:在左侧组件列表中,找到“能效等级”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112980.png)
配置数据源:在右侧配置栏中,选择设备组进行数据源配置。
配置样式:可在右侧配置栏中,对能效等级的标题内容、标题字体大小、标题字体颜色等进行设置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953693.png)
- 异常报警列表
应用示例:用来展示系统和设备7天内未解决的异常报警信息,包括智控预警、设备保养、设备故障、设备预警的消息。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112705.png)
添加组件:在左侧组件列表中,找到“异常报警列表”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954072.png)
配置数据源:在右侧配置栏中,选择设备组进行数据源配置。
配置样式:可在右侧配置栏中,对异常报警列表的背景颜色、标题样式、内容样式等进行设置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112984.png)
图表
- 数值
应用示例:可统计今天/昨天/本月/上月的数据,例如:统计今天/昨天/本月/上月空压站房的耗电量。
添加组件:在左侧组件列表中,找到“数值”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953697.png)
配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,选择统计周期-今天/昨天/本月/上月,单击保存,完成数据配置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112709.png)
配置样式:在右侧配置栏,可对统计的数值样式进行配置。选中整个组件,可对整个组件的字体大小和颜色进行设置。分别选中参数名称、单位或参数值,可分别对参数名称、单位或参数值进行字体大小和颜色设置。
- 曲线图
应用示例:曲线图组件以折线或曲线形式展示多条数据变动趋势,方便您分析比较数据的变动情况。可按小时/天/月的周期进行数据统计和展示,例如,展示多个空压站房近7天每天的用电单耗。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954076.png)
添加组件:在左侧组件列表中,找到“曲线图”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753112992.png)
配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,最多可选择5个。选择统计周期-按小时/按天/按月进行数据统计。还可以选择是否在曲线上显示最大值、最小值、平均值。单击保存,完成数据配置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953713.png)
配置样式:可在右侧配置栏中,对曲线图组件进行样式设置。
全局样式 |
是否展示数据点、曲线是否平滑、曲线底部距离 |
标题 |
设置标题内容、字体大小和字体颜色 |
图例 |
设置图例字体大小和字体颜色 |
X轴设置 |
设置X轴刻度上的字体大小和字体颜色 |
Y轴设置 |
设置Y轴最小值和最小值控制曲线的变化幅度,设置Y轴刻度上的字体大小和字体颜色 |
- 柱状图
应用示例:柱状图组件以柱状形式展示多条数据变动趋势,方便您分析比较数据的变动情况。可按小时/天/月的周期进行数据统计和展示,例如,展示多个空压站房近7天每天的耗电量。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112745.png)
添加组件:在左侧组件列表中,找到“柱状图”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954136.png)
配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,最多可选择5个。选择统计周期-按小时/按天/按月进行数据统计。还可以选择是否在柱状图上显示最大值、最小值、平均值。单击保存,完成数据配置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001753113088.png)
配置样式:可在右侧配置栏中,对柱状图组件进行样式设置。
全局样式 |
是否展示数据点、曲线底部距离 |
标题 |
设置标题内容、字体大小和字体颜色 |
图例 |
设置图例字体大小和字体颜色 |
X轴设置 |
设置X轴刻度上的字体大小和字体颜色 |
Y轴设置 |
设置Y轴最小值和最小值控制曲线的变化幅度,设置Y轴刻度上的字体大小和字体颜色 |
- 实时曲线
应用示例:实时曲线图组件以折线或曲线形式展示多条实时数据变动趋势,方便您分析比较数据的变动情况。可展示近30分钟、近1个小时的实时数据,例如,展示多个空压站房近30分钟的瞬时流量。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001799953829.png)
添加组件:在左侧组件列表中,找到“实时曲线”组件,将该组件拖到画布中。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001800112861.png)
配置数据源:在右侧配置栏中,单击配置数据源后,选择数据源类型,选择相关参数,最多可选择5个。选择展示周期-近30分钟/近1个小时。还可以选择是否在曲线上显示最大值、最小值、平均值。单击保存,完成数据配置。
![](https://support.huaweicloud.com/mcics-power/zh-cn_image_0000001752954252.png)
配置样式:可在右侧配置栏中,对实时曲线组件进行样式设置。
全局样式 |
是否展示数据点、曲线是否平滑、曲线底部距离 |
标题 |
设置标题内容、字体大小和字体颜色 |
图例 |
设置图例字体大小和字体颜色 |
X轴设置 |
设置X轴刻度上的字体大小和字体颜色 |
Y轴设置 |
设置Y轴最小值和最小值控制曲线的变化幅度,设置Y轴刻度上的字体大小和字体颜色 |