《工业可视化》课件 任务1.2 设计工业企业信息页面 -知识准备

《工业可视化》/工业互联网系列课程湖南三一工业职业技术学院项目一：工业企业信息的可视化设计任务1.2设计可视化页面>>※知识准备《工业可视化》/工业互联网系列课程目录基础组件-文本01基础组件-视频02基础组件-图片03网页组件-图片轮播041.基础组件-文本文本是比较常用的基本组件，可以展示输入的固定文本内容；当文本组件的数据源为物模型的直连属性时，也可以展示设备的实时采集值。位置尺寸：设置组件的长宽尺寸和位置，XY是设置组件的高度和宽度，单位为像素；WH是组件的宽度和高度。可以输入数值自定义大小，也可以通过拖拽的方式改变组件的宽高，后续介绍的其他组件也是可以通过这两种方式调整大小。字体：设置文本字体。方向：文本组件内的文字排版方向。字重：设置字体的粗细。颜色：设置字体颜色。字号：设置字体大小，直接输入数值设置。行间距：设置文本框中字体的行间距。方向：设置文字对齐方式，包含左对齐、居中对齐、右对齐。

设置内容设置文本框的颜色，支持渐变，通过单击“+”符号添加另一种颜色，从而达到两种颜色的渐变效果。单击“”符号可以修改颜色渐变的方向。注意：设置文本框背景色时，需要调整背景色的透明度大于0%，文本框才会显示出颜色。背景色1.基础组件-文本设置文本组件边框线条颜色、类型（实线、虚线、无边框和粗细；可通过输入颜色值调整颜色，或者通过调色板选择颜色和透明度，边框默认设置为“无”，需要选择实线或者虚线才会出现对应的边框样式。边框1.基础组件-文本圆角：调整文本框的角度样式，默认是零，拉拽或输入数值可改变圆角大小。文本：用来输入需要在文本框内显示的文字内容。页面列表：设置单击跳转的页面，通过单击组件进行页面切换。链接地址：可以给组件链接网页地址，在单击组件时跳转到相应网页。设置内容1.基础组件-文本当勾选时，会出现需要设置如下的参数：

触发方式：弹框的触发方式，包括划过显示和单击显示；

关闭方式：弹框的关闭方式，包括划过关闭和电机关闭；

内容来源：包括“在弹框上设置”或“链接页面”；播放方式：如果选择内容来源是“在弹框上设置”，则需要设置弹框的播放方式（当弹框内容是视频、滚动图片时，不同播放方式会有区别）。文本弹框：弹框可以放置其他组件，当单击或划过组件时，显示弹框中的组件。阴影：勾选显示文本框的阴影并修改其阴影颜色，取消勾选则无阴影。1.基础组件-文本1.文本组件的数据源文本组件的数据源类型选择“数据源”时，会显示如右侧图片所示的内容；

设置内容文本组件的数据源包括：无、数据源、系统时间。在进行文本组件数据源配置时，可直接显示数据表中的数据、物模型的直连属性对应的实时采集值等。1.文本组件的数据源数据源设置类型：可以选择“无、数据源、系统时间日期”数据源数据源右图所示的物模型有个开关按钮，如果打开表示该文本组件直接引用页面所绑定的物模型，如果关闭则需要自行配置；取值文本组件显示的数据值；判断条件设置不同条件展示不同的文本内容参与组件过滤勾选此项后，本组件的数据源将参与本页面的其它筛选器的筛选。例如本页面中有“日期筛选器”对某一数据源进行日期筛选，则本组件用到同一个数据源时将只能读取到经“日期筛选器”筛选后的数据。设置内容数据源的来源有三种：根云平台的物模型数据，包括：报警数据、采集点数据、历史数据；是iFSM系统的数据；用户创建的数据源，包括数据库、本地文件、自定义表等；前两种数据是云视界与工业互联网平台（根云平台）和iFSM系统做了系统对接，可自动获取，只要用户在这两个系统中有数据即可自动获取得到。而用户创建的数据源，创建后才会在列表显示，否则无显示。本书重点介绍和使用工业互联网平台及数据库的数据源。数据源来源1.文本组件的数据源1.文本组件的数据源如果数据源选用物模型的数据，如采集点数据，则需要单击数据源下拉框右侧的设置图标，并在之后的弹框中设置具体物模型id和设备id,如右图所示。设置内容取值：表示该文本需要展示数据源中的哪个字段的数据判断条件：可以通过单击“+”图标为文本组件增加判断条件，实现不同判断结果时展示不同的文本内容。筛选条件：可以设置多种关系运算符（>、>=、<、<=、≠）以及“区间”；文本：符合筛选条件时显示的文本内容；字体颜色：符合筛选条件时显示的文字颜色；背景颜色：符合筛选条件时显示的文本框颜色；

设置内容1.文本组件的数据源举例：如右图所示设置文本组件的数据源为采集点的“急停”属性，一旦急停信号采集到的值为1时，文本显示“报警，请注意”的红色字体，否则不显示信息。《工业可视化》/工业互联网系列课程目录基础组件-文本01基础组件-视频02基础组件-图片03网页组件-图片轮播043.基础组件-图片

图片组件是基本组件的一种，可以用来展示本地或者网络图片。位置尺寸：设置图片组件的长宽尺寸和位置。图片组件可以选择普通图片（左）和设备图片（右）两种，设备图片即通过图片传递当前设备的相关信息，如：设备ID。对称：可对组件进行上下、左右对称翻转。单击左右翻转（）图标，控制组件左右翻转样式。单击上下翻转（）图标，控制组件上下翻转样式。旋转：将图片做旋转处理，可以通过滑动条调整，也可以直接输入角度值。图片：可将素材库中图片拖拽到此处进行替换。填充方式：图片填充方式包括拉伸、填充、覆盖、居中。边框：可设置组件的边框类型，包括实线、虚线、无边框。手动输入数值或单击（）按键，改变边框粗细。属性设置3.基础组件-图片组件边框的颜色。在颜色调色板中选择颜色和透明度；手动输入RGB、HSL、Hex数值，改变颜色。边框颜色3.基础组件-图片透明度：图片组件的透明度。取值范围为0~100%。为0时，图片隐藏；为100%时，图片全部显示。默认为100%。链接地址：如果设置链接网页地址，单击组件时跳转到相应网页。页面列表：可以设置单击跳转的页面，通过单击组件进行页面切换。图片弹框：与文本弹框的设置同。背景阴影：与文本弹框的设置同。设置内容3.基础组件-图片背景阴影：勾选显示组件的背景阴影并需要设置如下参数，取消勾选则无阴影。阴影：设置阴影的颜色。可以在调色板中选择颜色和透明度；也可以手动输入RGB、HSL、Hex数值，改变颜色。设置内容3.基础组件-图片鼠标悬停效果：勾选添加鼠标悬停效果，通过添加图片，当鼠标悬停于图片位置时，显示添加的图片，取消勾选则无此效果。鼠标按下效果：勾选添加鼠标按下效果，通过添加图片，当鼠标在图片位置按下时，显示添加的图片，取消勾选则无此效果。属性设置3.基础组件-图片图片组件的数据源选择及取值等与文本组件的数据源设置同。不展开阐述。

设置内容2.图片组件的数据源2.图片组件的数据源设置内容在进行图片组件数据源配置时，可为展示图片增设置判断条件，实现不同结果时展示不同图片。例如，右图所示的设置中，取值为物模型的报警属性，当报警属性采集到的信号值为1时，显示报警图片，否则为空。《工业可视化》/工业互联网系列课程目录基础组件-文本01基础组件-视频02基础组件-图片03网页组件-图片轮播042.基础组件-视频视频组件是基本组件的一种，可以用来展示本地或者网络视频。视频组件无数据源。视频大小：包括组件的宽度和高度，单位为像素。可以输入数值自定义大小；也可以通过拖拽的方式改变组件的宽高。

设置内容视频来源：选择素材库中的视频或者网址中的引用视频。排布：包括居中和填满。本地：可以选择已上传到素材库的本地视频进行展示。网址：输入视频网址，可以展示网络视频。自动播放：可以选择是否自动播放。声音设置：默认是静音，可以选择视频播放时声音是否开启。

设置内容2.基础组件-视频视频半透明：选择视频是否半透明，并可以设置视频背景。重置主题样式：可以重新设置组件的主题样式为默认。设置内容2.基础组件-视频《工业可视化》/工业互联网系列课程目录基础组件-文本01基础组件-视频02基础组件-图片03网页组件-图片轮播044.网页组件-图片轮播图片轮播是网页组件的一种，可以用来轮播展示本地或者网络图片，该组件没有数据源配置。位置尺寸：设置图片轮播组件的长宽尺寸和位置。对称：可对组件进行上下、左右对称翻转。填充方式：图片填充方式包括拉伸、填充、覆盖、居中。边框：可设置组件的边框类型，包括实线、虚线、无边框设置内容透明度：组件的透明度。取值范围为0~100%。为0时，组件隐藏；为100%时，组件全部显示。默认为100%。拉拽或输入数值可改变其透明度。链接地址：可以给组件链接网页地址，在单击组件时跳转到相应网页。页面列表：可以设置单击跳转的页面，通过单击组件进行页面切换。轮播速度：设置图片轮播切换速度，有5种速度选择。设置内容4.网页组件-图片轮播4.网页组件-图片轮播配置选项：当前有左右移动、图层导航两种选项，可以通过勾选，选择显示或隐藏。背景阴影：勾选显示组