《工业可视化》课件 任务3.2 设计售后服务信息页面 -知识准备

《工业可视化》/工业互联网系列课程湖南三一工业职业技术学院项目三：后市场服务的可视化设计任务3.2设计售后服务信息页面>>※知识准备《工业可视化》/工业互联网系列课程目录控件组件-力矩百分比01图表组件-饼图02网页组件-标签页031.控件组件-力矩百分比力矩百分比可以显示数值所占比例，或者某个信息的数值，如速度、温度等；其在控件组件下，使用时直接拖拽到页面即可，如下图所示，力矩百分比的属性设置内容如所示，数据源设置同直线进度条。1.控件组件-力矩百分比位置尺寸：XY是设置组件的高度和宽度，单位为像素；WH是组件的宽度和高度；

设置内容属性显示：可选居中或填满标题、百分比：可勾选显示，不勾选隐藏选择主题：可选择组件的主题颜色标题：标题显示的内容，可自定义修改字体：选择字体方向：字体的排列方向字重：字体粗细颜色：字体颜色1.控件组件-力矩百分比属性设置数值显示：可选择百分比或者数值，如果选择百分比，则数据后会有“%”符号；显示：可设置组件数据的最小值和最大值颜色：可设置组件显示的颜色，可设置渐变色边框：设置组件的边框，可以选择无、虚线、实线程度标记：可设置条件，当数值在大于某个阈值时，显示提示颜色2.图表组件-饼图饼图属于图表组件，饼图用于分析数据的简单占比，用户可以通过饼图很直观的看到每一个部分在整体中所占的比例，帮助用户快速了解数据的占比分配。使用时，从图表组件中拖拽饼图到页面的位置即可，如图所示。饼图不适用于多分类的数据，因为随着分类的增多，每个切片就会变小，最后导致大小区分不明显，每个切片看上去都差不多大小，这样对于数据的对比是没有什么意义的。所以饼图不适合用于数据量大且分类很多的场景。2.图表组件-饼图位置尺寸：XY是设置组件的高度和宽度，单位为像素；WH是组件的宽度和高度可选择实心饼图或者环状图样式设置内容2.图表组件-饼图显示：可选居中或填满图例、数值标签：可勾选显示，不勾选隐藏选择主题：可选择组件的主题颜色数值样式：可选择显示百分比或者数值。图表字体：选择字体。字号：设置字体大小。字重：设置字体粗细。颜色：设置字体颜色。属性2.图表组件-饼图半径：可调节饼图的半径背景色：可为饼图设置背景色如果想要重置属性的参数，可单击“重置主题样式”恢复初始值。图表样式2.图表组件-饼图数据源设置数据源：选择需要关联的数据表；度量：展示饼图的组成数据源过滤：单击“+”图标可弹出“添加过滤”弹窗，可设置“条件过滤”“日期过滤”“排序”参与组件过滤：勾选时，本组件的数据源将参与本页面的其它筛选器的筛选。3.网页组件-标签页标签页组件是比较常用的网页组件之一，方便用户在一个页面中对多个报表页面进行集中查看。标签页组件通过配置选项卡切换，满足企业人员对业务平级内容切换展示。标签组件可以在“基础组件→网页→标签页”中找到，使用时直接拖拽到页面位置即可。3.网页组件-标签页位置尺寸：XY是设置组件的高度和宽度，单位为像素；WH是组件的宽度和高度；主题：可以设置组件的主题颜色；当前有5种主题色供选择；属性设置3.网页组件-标签页标签文本样式，即设置标签未选中时的显示效果。属性设置字体：设置字体样式；方向：设置文本方向，包括横向和纵向；字重：设置文字粗细；字体颜色：设置文字的颜色字号：设置文字的大小；背景色：设置组件的背景颜色；边框：可以设置组件的边框颜色，还可设置组件的边框类型，包括实线、虚线、无边框，手动输入数值或单击改变边框粗细；3.网页组件-标签页标签高度样式，即设置标签选中时的显示效果z标签高度样式，即设置标签选中时的显示效果。字体：可选择字体样式；字重：设置文字粗细；字体颜色：设置文字的颜色；字号：设置文字的大小背景色：设置高亮标签的背景颜色；边框：设置标签的边框颜色，可设置组件的边框类型，包括实线、虚线、无边框。手动输入数值或单击改变边框粗细；属性设置3.网页组件-标签页标签：可选择显示或隐藏标签；滚动时间：点击下拉框可设置标签页滚动的时间，也就是多个标签之间的滚动呈现；标签属性3.网页组件-标签页添加标签，可单击“+”图标添加标签页，单击删除，可选中标签进行编辑；文本：可选中标签进行编辑；顺序：输入数字可以更改标签页顺序；3.网页组件-标签页标签页组件的“关联组件”设置，可从属性中选中单个标签分别进行对其进行组件关联，通过标签和其他组件的关联，可以通过切换显示其关联的组件内容。标签数据源可以设置为：无、物模型、数据源；如果选择为无，则只能显示默认的文字内容；如果关联物模型，则显示直连物模型的实时采集数据；如果选择为数据源则显示用户创建的数据源。通过“启动”钮，此时，页面内的组件会出现可单击选中的圆圈，选中页面已存在的组件的圆圈，即可与标签关联。选中关联3.网页组件-标签页关联组件设置数据源：标签组件也可以关联数据源，对数据源中的取值进行判断，从而根据判断条件显示不同的标签，数据源设置与文本组件设置同；数据源过滤：设置数据过滤的条件，进行过滤操作；添加条件：单击“+”图标添加条件，单击图标删除；筛选条件：设置具体的条件进行选择；标签：设置满足条件时，显示标签；未满足