《工业可视化》课件 任务1.1 创建可视化项目 -任务实施

项目一：工业企业信息的可视化设计任务1.1创建可视化项目>>※任务实施《工业可视化》/工业互联网系列课程湖南三一工业职业技术学院《工业可视化》/工业互联网系列课程目录1.页面规划2.登录平台3.准备素材4.创建项目5.设计布局1.页面规划（1）

任务分析

在项目背景中，甲方公司需要展示的企业信息内容包括：公司简介、介绍视频、公司产品图片、研发实力、办公大楼、当前日期和时间等。相关内容展示需要用的组件如下：展示内容条目名称使用组件数据源备注公司介绍公司简介文本组件无客户提供文字宣传视频视频组件无客户提供视频公司产品图片轮播组件无客户提供图片公司实力研发实力图片组件无客户提供图片集团大楼图片组件无客户提供图片其他当前日期和时间文本组件系统时间日期无任务分析1.页面规划

在进行页面设计之前，先规划草图，将需要展示的内容在页面上完成布局。公司简介（文本组件）宣传视频（视频组件）公司名称（文本组件）集团大楼（图片组件）当前日期和时间（文本组件）研发实力（图片组件）公司产品（图片轮播组件）规划页面草图2.登录平台登录云视界（1）打开可视化设计平台——云视界的地址，并输入注册的手机号和密码。云视界的登录的地址为：/view/login。2.登录平台登录云视界（2）登录云视界后，可以单击“帮助文档”或“帮助视频”的标签可以进入云视界用户手册页面，里面有对云视界使用的详细说明。3.准备素材云视界有系统自带的素材，截止版本号为4.6.18的系统素材中，预置了设备、图标、装饰、背景4大分类设计素材，用户可以直接使用。如果用户擅长设计，也可以根据设计需求制作素材上传云视界使用，文件格式支持jpg，png，gif，svg，mp4，mp3，mpeg，webp等，文件大小限制100MB以内。

（1）在云视界的左边导航栏，选择“资源库”下的“素材库”标签，进入素材库页面。

3.准备素材新建文件夹（2）切换到“我的素材库”标签，单击“新建文件夹”，在弹出来的对话框中，输入文件夹名称（可自定义），最后单击“确认”按钮。文件夹下还可以创建子文件夹“项目1素材”。3.准备素材上传素材（3）单击创建好的素材文件夹，如图1-1-12所示。进入文件夹后，单击“上传文件”，找到素材存放的位置，选择并单击“打开”按钮，即可完成素材上传。4.创建项目

（1）在云视界首页，创建项目有两种方式：第一种，以空白模板创建新的项目。操作步骤如下：单击“创建项目”标签，在弹框中输入自定义项目名称，选择所需的模板，最后单击“创建”按钮完成创建项目。4.创建项目

（1）在云视界首页，创建项目有两种方式：第二种，通过导入项目ID创建新的项目。操作步骤如下：单击“创建项目”，在弹窗中单击“导入项目ID”，在新弹窗中输入项目ID、授权码、项目名称，单击“导入”按钮。这种方式相当于复制已有的其他项目。说明：本书示例输入的项目ID数值不是固定的，是根据实际需要复制的项目的ID而定，项目的授权码默认为“123456”。4.创建项目创建项目（2）创建项目完成后，页面自动跳转到可视化编辑页面，在编辑区可以通过拖动下方的比例图标来调节页面在编辑区的显示比例。4.创建项目修改页面名称（3）修改页面名称。先单击页面切换图标，出现的弹框中，单击修改图标，把页面名称改为“集团信息展示”（注：名称可自定义，但是建议按照一定的规范进行修改，便于其他工程师运维），单击“确定”按钮完成修改，操作顺序如下。说明：建议用户在页面编辑过程中，应及时手动保存页面设计。5.设计布局页面尺寸设计1）根据展示大屏的大小设置可视化项目的页面尺寸，本任务使用的尺寸为默认的1980px*1080px5.设计布局设置页面背景2）在可视化编辑器的顶部导航栏，单击选择“素材库”图标，选择本书配套的任务1.1中的“背景图”素材，拖拽到右侧属性栏下的“选择图片”框中，如图所示。本步骤也可以选择系统素材库中的“背景”文件下合适的图片作为页面背景。5.设计布局使用容器布局3）完成背景设置之后，在页面用容器进行布局。首先单击顶部导航栏的“基本组件”按钮，单击“容器”图标，页面上会出现容器的图框，可以通过拖拽容器边框的方式来调整容器大小，如图所示。5.设计布局使用容器布局4）选中容器，打开容器的“锁定纵横比”；在素材库中找到合适的图片，本示例中使用的本书配套资源“任务1.1”文件夹下的“标题”图片；将选中的图片拖拽到容器属性的“背景图片”框中；如图所示。5.设计布局使用容器布局5）重复前“3）至4）”这2个步骤的操作，添加其他容器并更改容器背景，完成整个页面的布局设置，如图所示。本示例新增容器使用的容器背景均是本书配套的“任务1.1”文件夹下的“装饰框”图片，也可以自定义使用系统素材中的“装饰→边框”文件下合适的边框图片。5.设计布局说明容器在手机端的显示顺序是按照图层中的容器顺序来定，因此可以在图层中选中某个容器，通过调整其排列顺序来调整