《工业可视化》课件 任务5.1 创建及规划大屏首页 -任务实施

《工业可视化》/工业互联网系列课程项目五：集成及发布工业可视化大屏任务5.1创建及规划大屏首页>>※任务实施《工业可视化》/工业互联网系列课程1.任务分析2.准备数据源及素材3.创建空白模板项目4.规划页面布局5.设计集团概览区域6.设计设备驾驶舱区域7.设计生产车间区域8.设计租赁经营区域9.设计营销业务区域10.设计后市场服务区域11.设计集团大事记目录1.任务分析本任务的主要目的是设计数字化平台的首页，展示集团几个重要的模块概况，包括集团概况、设备驾驶舱、生产车间、租赁经营、营销业务、后市场服务、集团大事记等;具体展示数据和显示组件分析结果如表所示：展示模块具体内容使用组件数据源集团概况研发中心文本组件、图片组件无发明专利文本组件、图片组件研发投入文本组件、图片组件软件著作权文本组件、图片组件设备驾驶舱总设备数数字图标卡片在线设备数字图表卡片MYSQL数据库-设备驾驶舱-在线数总开机率半仪表盘MYSQL数据库-设备驾驶舱-开机率总作业率半仪表盘MYSQL数据库-设备驾驶舱-作业率任务分析1.任务分析展示模块具体内容使用组件数据源生产车间订单完成度直线进度条物模型-生产车间-生产进度今日产量直线进度条物模型-生产车间-今日产量租赁经营分析本月出租设备数、本月租金收入、今年累计租户、今年累计租金”文本组件、图片组件MYSQL数据库-本年度累计租赁指标营销业务签单完成率折线图组件MYSQL数据库-月度签单完成率后市场服务设备保修状态饼状图组件MYSQL数据库-设备保修状态统计集团大事记成立至今大事文本组件无任务分析2.准备数据源及素材本任务使用的数据源，可以在本书配套资源中获取，所需的全部数据源如任务分析中表所示的数据源列。也可以使用自有数据库作为数据源。（1）准备数据源（2）准备素材本任务使用的素材，可以在本书配套资源中获取并上传，所需的全部素材如下图所示，也可以使用自有素材。3.创建空白模板项目（1）创建项目。登录云视界平台，在云视界首页选择“概览”；单击“创建项目”；在弹框中输入项目名称，本项目示例名称为“数字化平台”；类型选择“网页”；选择空白页面；最后单击“创建”按钮。创建项目3.创建空白模板项目（1）

任务分析（2）创建完成后，页面自动跳转到可视化编辑页面，如图所示。创建项目3.创建空白模板项目（1）

任务分析（3）修改页面名称。在导航栏打开页面的名称，修改其名称为“数字化平台首页”，如图所示。修改页面名称4.规划页面布局（1）规划草图。根据数字化平台首页需要展示的内容，页面布局的草图规划如图所示。规划草图4.规划页面布局（1）

任务分析（2）设置背景。在可视化编辑器的左上角导航栏，单击选择“素材库”图标；在左侧导航栏单击选择“我的”；在“工业可视化课程素材”文件夹下选择“任务5_1”，找到背景图拖拽到页面的背景处的“选择图片”框中，如图所示。设置背景4.规划页面布局（1）

任务分析（3）添加容器。完成背景设置之后，在页面用容器进行布局。首先单击左导航栏的“基本组件”按钮，单击“容器”图标，页面上会出现容器的图框。添加容器4.规划页面布局（1）

任务分析（4）调整容器大小。通过拖拽方式，调整容器大小，调整后的容器行列数为2*24。设置容器4.规划页面布局（1）

任务分析（5）修改容器名称。切换至图层，选中容器的情况下，单击其后的编辑图标，修改容器名称为“主标题”，最后单击确定完成修改。设置容器4.规划页面布局（1）

任务分析（6）设置容器背景。选中容器状态下，在素材库的“任务5_1”文件夹下找到“标题图”图片；将图片拖拽到容器属性的“背景图片”框中；打开容器“锁定比例”开关。设置容器说明：容器打开“锁定比例”后，在不同屏幕（（app客户端/web网页/大屏幕））下可以保持纵横比而不变形。4.规划页面布局（1）

任务分析（7）重复前面（2）（3）步骤的操作方法，在主标题容器下添加并列的3个容器，其行列数量都为22*8，容器名称可自定义，需要打开容器“锁定比例”开关。设置其他容器4.规划页面布局（1）

任务分析（8）装饰左侧容器背景。在素材库的“任务5_1”文件夹下找到“框左1、框左2、框左3”的图片；将该图片拖拽到页面左侧的容器中，本项目只需拖拽图片位置，图片大小无需调整，采用默认大小。设置其他容器4.规划页面布局（1）

任务分析（9）装饰右侧容器背景。重复上个步骤，分别将“框右1、框右2、框右3”图片拖拽到右侧容器合适的位置，均无需调整图片大小，只需调整位置即可，完成的效果如图所示。设置其他容器4.规划页面布局（1）

任务分析（10）设计页面标题。使用拖拽的方式，把文本组件添加到页面的标题位置，自定义其属性参数，如图所示。设置其他容器4.规划页面布局（1）

任务分析（11）按照上步骤的操作，完成其他区域标题文本设置，文字属性可自定义调整，如图所示。设置其他容器5.设计集团概览区域（1）

任务分析（1）在素材库的“任务5_1”文件夹下找到“图标-建筑”的图片；将该图片拖拽到“集团概览”内；并设置该图片的屏幕大小。设置集团概览5.设计集团概览区域（1）

任务分析（2）使用两个文本组件分别设置显示“研发中心”“5”“个”的文字，文字属性可自定义调整，排版位置如图所示。设置文本5.设计集团概览区域（1）

任务分析（3）重复前两步的操作，分别设置“发明专利”“研发投入”“软件著作权”的展示内容。设置其他文本5.设计集团概览区域（1）

任务分析重复前两步的操作，分别设置“发明专利”“研发投入”“软件著作权”的展示内容步骤也可以通过多选并用快捷键复制粘贴的形式，快速设置所需的文本内容，如下图所示：设置其他文本6.设计设备驾驶舱区域（1）

任务分析（1）从网页组件中拖拽数字图标卡片到设备驾驶舱区域的合适位置，标题文本输入“总设备数”，其他属性设置可自定义。设置设备驾驶舱6.设计设备驾驶舱区域（1）

任务分析（2）在选中“数字图标卡片”组件情况下，切换至数据源配置，数据源选择“设备驾驶舱_示例”，度量选择“总数”，如图所示。本步骤使用的数据源与“2.3.3任务实施→4.设置设备状态数”的数据源同，也可以使用自行创建的数据源。设置数据源6.设计设备驾驶舱区域（1）

任务分析（3）通过使用复制粘贴的快捷方式，设计另一个数字图标卡片，修改其标题文字为“在线设备数”，数据源选择“设备驾驶舱_示例”，度量选择“总数”。设置其他卡片6.设计设备驾驶舱区域（1）

任务分析（4）从工控组件区中，使用拖拽的方式把“半仪表盘”添加到“车间设备驾驶舱”合适位置；属性设置可自定义。添加半仪表盘6.设计设备驾驶舱区域（1）

任务分析（5）选中“半仪表盘”，切换到数据源设置，数据源选择“设备驾驶舱_示例”，度量选择“开机率”。设置数据源6.设计设备驾驶舱区域（1）

任务分析（6）复制前一步骤设置好的“半仪表盘”；属性设置中，样式选择“右仪表盘”，主标题文本修改为“作业率”，副标题文本修改为“WorkingRate”；数据源选择“设备驾驶舱_示例”，度量选择“作业率”，如图所示，最后保存刷新。设置其他半仪表板7.设计生产车间区域（1）

任务分析（1）使用拖拽的方式，把工控组件中的“直线进度条”添加到“生产车间”区域合适的位置；图表字体的标题改为“订单完成进度”，其他属性可自定义，如图所示。添加控件7.设计生产车间区域（1）

任务分析（2）选中直线进度条组件的状态下，切换到数据源设置。数据源选择“采集点数据”，然后单击采集点数据后的设置图标，在弹窗中设置物模型id和设备id，最后确认完成配置，如图所示。本步骤设置的数据源与“2.2.3任务实施→4.设计订单完成进度”的数据源同。设置数据源7.设计生产车间区域（1）

任务分析（2）选中直线进度条组件的状态下，切换到数据源设置。数据源选择“采集点数据”，然后单击采集点数据后的设置图标，在弹窗中设置物模型id和设备id，最后确认完成配置，如图所示。本步骤设置的数据源与“2.2.3任务实施→4.设计订单完成进度”的数据源同。设置数据源7.设计生产车间区域（1）

任务分析（3）完成后物模型id和设备id的设置后，度量选择“生产进度”，如图所示。设置数据源7.设计生产车间区域（1）

任务分析（4）用复制粘贴的快捷方式，复制另一个直线进度条组件，修改其图表字体的标题为“今日产量”，图表样式的数值显示为“数值”，值域为“0-1000”，如图所示。添加组件7.设计生产车间区域（1）

任务分析（5）切换至数据源，使用采集点数据，物模型id和设备id与订单完成进度的同，度量选择“今日产量”，如图所示。设置数据源8.设计租赁经营区域（1）

任务分析（1）本区域的设计与本书的“4.1.3任务实施→3.设计累计租赁数据”的设计方法及数据源同，不展开描述。设置效果如图所示。设置页面9.设计营销业务区域（1）

任务分析（1）从图表组件去将柱状图组件拖拽至“营销分析”区域内；设置“柱状图”的属性的时间格式为“月”，图表选项可参考图，也可自定义添加组件9.设计营销业务区域（1）

任务分析（2）选中“柱状图”的状态下，切换到数据源设置；①“数据源”选择“月度签单完成率”；②“维度”选择“日期”，“度量”选择“签单完成率”；③打开数据源过滤的“+”图标；④在弹框中切换到日期筛选；⑤单击“添加条件”标签，如图所示。添加数据源9.设计营销业务区域（1）

任务分析（3）在添加过滤弹框中，①选择“日期”作为筛选维度，②设定日期筛选的条件为“2022年1月1日至2022年12月31日”；③筛选器名称可自定义，本示例为“筛选2022年度完成率”，④最后保存完成设置，如图所示。添加过滤器9.设计营销业务区域（1）

任务分析（4）完成数据源过滤配置并保存刷新后，效果如图所示。页面效果10.设计后市场服务区域（1）

任务分析（1）在左侧导航栏的图表组件中，将饼图拖拽至“后市场服务”区域内；设置“柱状图”的属性，如图所示，也可自定义。添加组件10.设计后市场服务区域（1）

任务分析（2）为饼图设置数据源为“设备保修状态统计”，度量选择“保内设备数、保外设备数、本月续保设备数、即将过保设备数”，如图所示。添加数据源11.设计集团大事记（