跳到主要内容
版本:Next

页面概述

您可以通过页面管理,可视化搭建属于您的系统页面,所见及所得,快速自由组态设备监控页面、生产分析看板等场景界面,您也可使用直接使用集成的运行模块,开箱即用。

界面介绍

image-20230629153419229

下面为您介绍界面的结构和功能,帮助您快速了解可视化页面。

  1. 菜单栏:位于界面的最上方,可返回工程管理,搜素查看变量被应用的位置,可运行工程进行调试,可查看版本信息和帮助中心。
  2. 页面列表:位于界面左上方,展示工程的所有页面,可对页面进行操作。
  3. 组件列表:位于界面左下方,展示页面中的所有资源对象,以及其图层位置。
  4. 组态区域:位于界面中心,为页面的编辑及展示区域,可进行页面的布局与配色,各资源的大小位置排布,“所见即所得”可视化预览。
  5. 组件箱:位于画布区域右侧,在组件箱可查看官方提供各类组件资源以及您定义开发的资源,拖拽资源到画布区域,完成页面的开发。
  6. 工具栏:位于画布区域上方,包含了一些常用的工具操作,可对页面保存、预览多语言页面等操作,可对资源进行对齐、图层调整、组合、复制粘贴、转换资源等操作。
  7. 配置区域:位于界面右方,为画布和画布中资源的配置,单击画布区域,显示页面画布的属性面板,可调整画布尺寸、设置画布颜色、配置本页面事件;单击画布任一资源,显示资源的属性面板,可组件配置功能和组件事件。

页面

1)新建页面

进入“页面管理”后,在页面列表点击“新建”按钮,输入页面名,即完成页面的创建。创建的页面画布尺寸默认为网页1980x1080,支持自定义调整,或点击预设尺寸选择其他常规的画布尺寸,同时支持背景颜色的自定义。

image-20230105110235707

2)管理页面

选中对应页面,点击“更多”按钮,可进行以下页面操作:设为首页、重命名、创建副本、删除

image-20230105110415246

页面支持分组管理,点击“新建文件夹”按钮,输入文件夹名,拖拽页面至文件夹下

image-20230105112834387

3)导出导入页面

页面支持导出导入,可满足工程之间复用页面的需求。选中需导出的页面节点,点击导出按钮,选中存储路径,即完成页面的导出。点击导入按钮,选中导入的页面或页面压缩包,即完成页面的导入

image-20230629155649818

页面资源(组件)

1)添加资源

点击组件箱,选择对应的资源拖拽至画布对应位置释放,即完成页面资源对象的添加。

2)资源配置

在对象列表或在画布区域选中资源,右侧将显示样式、事件两个页签,分别配置资源的属性和自定义交互事件

3)管理资源

在组件列表或在画布区域选中资源,可通过工具栏、快捷键、对象列表,进行资源在页面画布上的一系列操作,具体请参考页面快捷操作介绍

image-20230105142400549

组件箱

组件箱包含以下类型

内置组件

  • 标准组件:包含基础文本图形、变量读写、跳转交互、容器等组件资源,

  • 运行模块:包含权限、日志、趋势配置等业务功能模块资源

  • 图表控件:包含柱形图、折线图、饼状图、表格、指标卡等图表报表控件资源

  • 控制组件:包含时间筛选、下拉筛选、输入筛选、数值筛选、自定义筛选器、导出打印、语言切换等控制组件资源

    image-20230629145012267

图库素材:可供重复使用的图像资源库,官方内置提供ui设计素材和工业部件图库,您也可导入常用的图库素材

image-20230629145046121

应用资源:可供重复使用的应用资源库,此外官方内置提供“布局框架”,一键应用即完成页面的设计,提供常用“内容套件”,一键应用即完成内容的设计

image-20230629151404210

页面运行

点击菜单栏-运行按钮,直接运行工程,点击其“更多”图标,可对工程运行设置,如工程调试时可开停服务,工程运行时显示设置。

image-20231019153149250

服务管理:

​ 在调试工程中,避免产生脏数据,可按需开停对应功能服务。

运行显示:

  1. 启用悬浮球:悬浮在窗口右侧,提供系统登录/登出、查看用户信息、全屏操作、退出系统、虚拟键盘等一系列快速操作。

  2. 全屏模式:全屏显示内容,提供更沉浸式的用户体验。

  3. 多屏显示:支持选择使用多个屏幕作为软件运行工作区,并支持工作区域的内容显示控制

    image-20231019155914656

    • 显示模式:

      仅主屏:主显示屏显示首页

      铺满全部屏幕:将首页铺满所有显示屏展示

      自定义屏幕显示:自定义屏幕显示的页面内容,可满足多个屏幕分别显示不同页面(页面分屏显示)和多个屏幕共同显示一个页面(页面多屏显示)功能场景

    • 自定义屏幕显示:

      选择显示器:点击下拉选择,软件的屏幕标识号与Windows系统的略有区别,可点击[标识]按钮识别屏幕

      设置所选显示的页面:选中对应行,点击列上的操作按钮,弹窗选择页面

    • 适应方式:页面投射至所选显示器上显示,支持以下四种效果:

      适应屏幕:页面内容在所选显示器中铺满显示 原始大小:页面内容在所选显示器中保持原始大小显示 适应宽度:页面内容在所选显示器中宽度铺满,高度等比例缩放 适应高度:页面内容在所选显示器中高度铺满,宽度等比例缩放

  4. 事件异常标记:支持开启事件异常标记,辅助您快速定位至问题事件

image-20240218115650067