工业互联网平台综合应用课件：工业设备可视化设计

《工业互联网平台综合应用》/

工业互联网平台数据应用

工业设备可视化设计《工业互联网平台综合应用》/知识准备任务实施目录0102

数据可视化让数据更容易被消化。

和纯粹的数据相比，人类更善于处理图像信息，更容易理清数据之间的关系。

数据可视化让数据“动”起来。

数据可视化可以通过折线图、柱形图等展现动态趋势的变化，让信息展现更加直观。

数据可视化让数据可以监测。

分析人员可以通过数据可视化监测数据在某段时间内的变化，对其进行预测、复盘等业务分析。

数据可视化让数据展现深层信息。

分析人员可以通过丰富的图表类型和联动、钻取等复杂功能，在数据分析的基础上进行复杂分析。数据可视化是借助于图形化手段，清晰有效地传达与沟通信息。数据可视化具有如下特征：数据可视化工业互联网平台综合应用云视界是服务于工业领域设备后市场的云端可视化工具平台，可以满足用户个性化配置工业设备展示界面的需求，方便广大的工业企业的管理者进行工业设备运行分析进而开展智能化管控。云视界用户可以根据个性需求自由配置设计页面，实现根云平台的前后端功能与服务的集成，可以设计工业管理界面。云视界可按设备模型组配置，可自适应屏幕布局，满足工业用

户日常管理、运行指挥、实时监控、演示汇报等多种生产业务场景

需要。云视界介绍工业互联网平台综合应用

02

页面页面是可视化编辑的产物，每种类型设备的多种展示页面，如实时工况展示页面、历史数据统计页面、设备控制流程页面等。对应一种设备类型的项目由一个或多个页面组成，多个页面反应了查看设备工况的多种角度。云视界可视化采用“页面—容器(组件)—组件”的方式实现可视化页面的布局及数据展现。

0

1

项目项目是对应一种设备类型的可视化文件集，包含页面、内容、数据及相关文件。可实现用户对该类型设备的多种可视化展示效果的设定。创建设备类型对应的具体项目，可以统一管理这种类型设备的工况展示效果。使用云视界之前，需要了解云视界中涉及到的几个名词概念：项目、页面、组件、数据源。云视界介绍工业互联网平台综合应用

03

组件组件是数据可视化的图形化载体，通过选择不同的组件，设备数据可以呈现多种展现方式。组件包含两种特性：组件的属性，通过组件属性定义组件的图形展示效果；组件的数据源，用于确定组件展示的数据，不同的组件可以关联不同种类的数据连接。

04

数据源数据源即为页面所展示各项设备参数的数据来源，包含设备模型数据或设备实时参数，通过同步功能自动获得，同时支持用户自定义数据库或导入数据库。云视界介绍工业互联网平台综合应用项目是对应一种设备类型的可视化文件集，包含页面、内容、数据及相关文件。单击概览页面导航栏中的“项目”，即可进入项目管理页面，在项目中，使用者可以自定义编辑设计设备的实时工况页面，实现工程设备可视化页面的设计、编辑、配置、保存、预览和发布。项目管理工业互联网平台综合应用①点击“创建项目”按键，弹出“创建新项目”对话框。②在对话框中为项目命名。③选择创建类型：网页、大屏。(二

选一)④选择使用模板页面或创建空白页面。⑤点击对话框的“创建”按钮，完成项目的创建。或点击“取消”放弃

创建。创建项目项目管理工业互联网平台综合应用①选择要编辑的项目卡片，鼠标划上卡片，单击右下方“编辑”按键②进入可视化编辑器web编辑页面，即可进行可视化设计编辑。编辑项目项目管理工业互联网平台综合应用①选定要复制的项目，点击卡片右上方“…

(更多操作)”，选择“复制”。②在弹出的对话框中为复制项目命名，默认名

称为“原项目名称(副本1)”，如有多个

副本，命名序号依次递增。③步骤3：点击“确定”按钮，即可复制项目，回到“项目列表”页。或点击“取消”放弃以上复制项目的操作。复制项目项目管理工业互联网平台综合应用①选定要删除的项目，点击卡片右上方“…(更多操作)”，选择“删除”②在弹出的对话框中点击“确定”按钮，即可删除项目。或点击“取消”放弃删除该可视化项目。删除项目项目管理工业互联网平台综合应用①步骤1：选定要重命名的项目，点击卡片右上方“…(更多操作)”，选择“重命名”。②步骤2：在弹出的对话框中为项目重新命名。③步骤3：点击“确定”按钮，即完成项目重命名，回到“项目列表”页。或点击“取消”放弃重命名。重命名项目项目管理工业互联网平台综合应用①每种类型设备具有多种展示页面，如实时工况展示页面、历史数据统计页面、设备控制流程页面等。对应一种设备类型的项目由一个或多个页面组成，多个页面反应了查看设备工况的多种角度②云视界可视化采用“页面—容器(组件)—组件”的方式实现可视化页面的布局及数据展现③云视界中内置了页面模板，页面模板与空白页面对应，是系统为用户创建的默认可选页面。在页面模板中已设置一系列的容器及组件，可为用户实现默认的页面展示效果。通过修改页面中的元素属性，

用户可以实现符合自己要求的可视化页面效果。页面管理工业互联网平台综合应用编辑器按照页面区域可划分为：导航栏-左、项目名称、导航栏-右、组件工具栏、属性/数据源编辑区、画布区域。重命名项目页面管理工业互联网平台综合应用名称说明图标返回主页可视化编辑器左侧导航栏第一个标签为“返回主页”。单击后将提示是否保存当前页面还是直接离开回到主页。基础组件可视化编辑器左侧导航栏第二个标签为

“基础组件”。基础组件包含：通用组件、图表组件、地图组件、工控组件、网页组件五类。用户可以选择使用基础组件库中的通用、图表、地图、工控、网页组件填充到画布。导航栏具体功能导航栏介绍页面管理工业互联网平台综合应用名称说明图标行业组件可视化编辑器左侧导航栏第三个标签为“行业组件”。用户可以选择使用行业组件库中的组件填充到画布素材库可视化编辑器左侧导航栏第四个标签为“素材库”。用户可以选择使用素材库中的素材填充到画布。素材库包含系统素材库、个人素材库。导航栏具体功能导航栏介绍页面管理工业互联网平台综合应用名称说明图标图层可视化编辑器左侧导航栏第五个标签为“图层”，图层展示了页面中所有的组件、页面结构及包含关系。

图层中以树形结构展示当前页面中的所有组件元素，根节点是

页面，子节点是容器，一直展开到组件元素或者容器节点；保存当前页可视化编辑器右侧导航栏第二个标签为“保存当前页”。用户在进行可视化编辑时，应及时保存页面设计操作。当用户完成页面设计时，需先进行保存，再预览发布。导航栏具体功能导航栏介绍页面管理工业互联网平台综合应用名称说明图标刷新可视化编辑器右侧导航栏第一个标签为“刷新”。编辑状态下，系统不会主动刷新数据，单击“刷新”标签后即可进行组态数据推送。这样可以避免因为数据自动刷新带来的编辑器卡顿。该功能不会影响发布后的页面数据推送。预览可视化编辑器右侧导航栏第三个标签为“预览”。用户进行可视化编辑时，可单击“预览”随时查看当前页面的设计效果。设计完成的页面，预览无误后，可发布页面。导航栏具体功能导航栏介绍页面管理工业互联网平台综合应用

数据源即为页面所展示各项设备参数的数据来源，包含设备模型数据或设备实时参数，通过同步功能自动获得，同时支持云视界用户自定义数据库或导入数据库。

云视界用户可在系统首页的“数据源”模块进行其他数据源的接入和上传

已上传和接入的数据源，在可视化编辑器中把组件与数据源关联后，可使组件展示实时或历史设备数值。数据源介绍工业互联网平台综合应用

组件包含两种特性：组件的属性，通过组件属性定义组件的图形展示效果；组件的数据源，通过关联不同种类的数据连接，从而确定组件展示界面的数据来源。

布局组件包括容器和大屏。容器可以用来盛放各个组件。大屏是容器的组合模板，包含多个容器，当前有6种模板样式可以选择布局组件工业互联网平台综合应用属性说明图标壁纸有四种预设的壁纸样式可以选择容器可选择锁定比例点击容器/大屏，编辑器面板中便可显示，可以通过拖拽的方式改变容器的宽亮。可以根据布局组件的属性进行配置属性配置布局组件工业互联网平台综合应用属性说明图标背景图片可自定义背景图片。将已上传素材库中的图片拖拽到此处背景颜色容器的背景颜色。支持渐变，

点击()改变渐变方向。在颜色调色板中选择颜色和透明度。手动输入RGB、HSL、Hex数值，改变颜色。属性配置布局组件工业互联网平台综合应用属性说明图标边框可以设置容器的边框颜色。在颜色调色板

中选择颜色和透明度。手动输入RGB、HSL、Hex数值，改变颜色。可设置组件的边框

类型，包括实线、虚线、无边框。手动输入数值或点击()按键，改变边框粗细。背景阴影勾选显示组件的背景阴影，取消勾选则无阴影。阴影：设置阴影的颜色。在颜色调色板中选择颜色和透明度。手动输入RGB、HSL、Hex数值，改变颜色。属性配置布局组件工业互联网平台综合应用属性说明图标添加滚动条是否显示：可选择滚动条显示或隐藏滚动条的高度，拉拽或输入数值或点击()可改变其高度属性配置布局组件工业互联网平台综合应用《工业互联网平台综合应用》/知识准备任务实施目录0102登录平台后进入全局工作台，单击“云视界”进入云视界首页，如图所示。添加数据源添加数据库数据源工业互联网平台综合应用01创建数据库数据源。如下图所示，在云视界首页，选择数据源，选择“创建数据源”。添加数据源添加数据库数据源工业互联网平台综合应用02如下图所示，选择“连接Mysql数据库”。添加数据源添加数据库数据源工业互联网平台综合应用03

4如下图所示，填写连接数据库的名称、服务器、端口、数据库、用户名和密码，填写完成后，点击“连接数

据库”。添加数据源添加数据库数据源工业互联网平台综合应用

05

连接成功后，点击“连接数据库”

，生成一条数据库连接记录，你可以在“已连接数据库”

区域看到。点击刚连接的数据库，进入选择页面，选择你需要的业务表，点击【新建】

，即可完成数据源的创建。添加数据源添加数据库数据源工业互联网平台综合应用01如下图所示，点击“上传excel文件”，选择“output.xlsx”文件，点击“打开”后，文件上传。添加数据源添加excel表格数据源工业互联网平台综合应用如下图所示，查看上传文件详情，自定义数据源名称为“output2”，勾选②处output，点击新建。添加数据源添加excel表格数据源工业互联网平台综合应用02新建完成的数据源如下图所示。添加数据源添加excel表格数据源工业互联网平台综合应用03在云视界首页，如图所示，点击项目，选择创建项目。创建空白模板项目工业互联网平台综合应用01如下图所示，设置项目名称为“工业机器人综合实训平台”

，选择空白模板进行创建。创建空白模板项目工业互联网平台综合应用02如下图所示，根据展示大屏的大小设置可视化项目的页面尺寸，本示例使用的尺寸为1920px*1080px。为使页面在布局时更为美观，设置网格间隙为16px。说明：在页面编辑设计过程中，云视界暂不

支持自动保存，用户应及时保存页面设计操作。页面布局规划工业互联网平台综合应用01上传素材。如下图所示，在可视化编辑器的左上角导航栏，单击选择“素材库”

图标，选择“我的素材库”。

在导航栏下方添加文件夹“综合应用素材”

，进入文件夹上传本地素材“综合应用-云视界素材”。在完成素材上传后，即可在左侧编辑栏对应的文件夹中进行查看素材。页面布局规划工业互联网平台综合应用02

3

打开上传文件的素材，选择“背景图”

图片，将选择的图片拖拽至②处“选择图片”框中。如图所示，此时在页面中的背景变成“背景图”

图片，在页面中不可对背景图片的大小和位置进行拖拽调整。页面布局规划工业互联网平台综合应用

4

完成背景设置之后，在页面用容器进行布局。如图所示，首先单击左导航栏的“基本组件”按钮，单击

“容器”

图标，如③处页面上会出现容器的图框。页面布局规划工业互联网平台综合应用

设备状态容器和设备信息容器的规格均为5*6；

生产信息容器和历史工况容器的规格均为9*6；

产量分析容器和报警消息容器的规格均为8*6；

设备能效的规格为5*10；设备图容器的规格为17*12。根据效果图和业务需求，为页面做出如下图所示布局规划其中：页面布局规划工业互联网平台综合应用0506标题容器布局。

选中刚创建的容器，将容器拖拽至2*24规格，并按照容器规划图进行页面布局，如下图所示，并在右侧勾选“锁定纵横比”。

容器打开“锁定比例”后，在不同屏幕下可以保持纵横比而不变形。

根据页面规划图逐个添加容器进行布局，直到完成页面

整体布局。页面布局规划工业互联网平台综合应用为容器进行命名。

选择图层，选中标题容