概述

产品概念

Xvisual是中科时代自研HMI组件应用。Xvisual是面向组态编辑及人机交互的SCADA产品，可以方便用户及FAE简单、快速、高效完成可视化自定义与自动化页面控制绘制。

Xvisual提供了易用的开发环境和丰富的功能，使组态工程师能快速地建立、测试和部署适合当前行业的HMI可视化应用。Xvisual可广泛应用在石油化工、冶金钢铁、电力、光伏、3C制造、生物医药等业务场景，为用户提供自定义HMI应用。

Xvisual 是创建大型分布式工业自动化系统的理想选择。Xvisual 可在服务器、嵌入式计算机和云端运行。Xvisual 节点之间相互交换信息，并实时与外部数据库交互。Xvisual拥有丰富的功能, 支持数十种常用工业通讯协议传输，具有常用报表、报警、趋势曲线、多种场景控件；具有各类行业常用模板，满足用户的各类生产监控需求。

快速下载

请您前往中科时代官方网站-资源下载专区进行相关内容下载，或者点击下方链接快速进行获取。
Windows: RTE【V1.2.5.10】 IDE【v1.2.5.10】

Unbutu:RTE

产品特点

组件构成

1、Xvisual-Server

Xvisual-Server管理数据存档，执行数学计算并向客户端应用程序提供信息。Xvisual-Server将数据写入主存档，并同时制作备份副本。

Xvisual-Server作为服务工作。它没有用户界面。无论用户登录和注销如何，服务器都会在后台连续运行。用于配置Xvisual-Server的图形 shell 内置于 Xvisual-Administrator应用程序中。另外Xvisual-Server模块允许根据客户要求扩展服务器的功能。

2、Xvisual-Communicator

Xvisual-Communicator与控制器交互并将数据传输到Xvisual-Server应用程序。与连接到系统的Xvisual-Communicator的通信是跨多条线并行执行的。Xvisual-Communicator从控制器接收当前数据、存档数据和事件，并向控制器发送命令。该应用程序有助于排除通信线路和设备的问题。

Xvisual-Communicator作为服务工作，没有用户界面。用于Xvisual-Communicator配置的图形shell内置于Xvisual-Administrator应用程序中。有关应用程序、通信线路和每个连接设备的信息写入日志文件中。Xvisual-Communicator为不间断运行而设计。开发人员能够实现他们自己的设备驱动程序来与各种控制器进行交互。

3、Xvisual-Webstation

Xvisual-Webstation是一个通过浏览器向调度程序显示信息并实现发送命令功能的web应用程序。下面是Webstation应用程序计划视图和 Webstation应用程序表示图。

用户可以选择视图(表或方案)和访问存档数据的日期。若要显示趋势，请单击表中的项图标或方案中的适当元素。Xvisual-Webstation可以从任何连接到组织网络的计算机或平板电脑上使用，不需要安装软件。访问由系统管理员管理，系统管理员定义用户权限。

4、Xvisual-Agent

Xvisual-Agent在Xvisual实例和Xvisual-Administrator应用程序之间传输配置。此外，Xvisual-Agent还提供日志文件显示在Xvisual-Administrator中。Xvisual-Agent作为服务运行在安装了由Xvisual-Agent控制的Xvisual实例的服务器上。一个Xvisual的实例包括Xvisual-Server、Xvisual-Communicator和Xvisual-Webstation这些应用程序的全部或部分。

Xvisual-Agent通过TCP协议与Xvisual-Administrator通信。因此，可以将Xvisual-Administrator安装在与Xvisual-Agent相同的计算机上，也可以安装在可以通过网络访问的另一台计算机上。默认情况下，Xvisual-Agent使用的TPC端口为10002。如果需要远程访问，服务器防火墙必须允许该端口使用。

Xvisual-Agent没有用户界面。为了检查其运行情况，需要使用日志文件。

5、Xvisual-Administrator

Xvisual-Administrator是一个集成开发环境，提供编辑配置主要的Xvisual应用程序和Xvisual-Server模块，用于开发Xvisual项目和查看自动化系统的状态。

快速配置的Xvisual-Administrator应用程序的工具和特性如下:

• 用于创建通信线路、设备和点位的向导。

• 点位克隆以最小化手动输入。

• 一个项目包含一组配置文件，主要使用XML格式，方便将项目从一台计算机复制到另一台计算机。

软件架构

Xvisual软件具有多层结构。软件中包含的应用程序(服务)使用TCP协议相互交互。Xvisual可以部署与IPC或客户PC内Xvisual既可以支持单机部署使用，也可支持分布式部署使用。

• 单机模式下的产品在IPC内部署使用架构
  

• 使用IPC进行分布式部署架构
  

安装卸载

安装要求

1、服务器软件要求

Windows:

• 操作系统:Microsoft Windows Server 2016/2019/2022, Microsoft Windows 10/11

• . net Runtime 8.0

Linux:

• 操作系统:Ubuntu

• . net Runtime 8.0

2、服务器硬件要求

服务器的硬件配置取决于自动化系统的规模。最小配置由操作系统需求决定。

Xvisual可以运行在物理或虚拟机上。

3、工作站或平板电脑要求

最新的Chrome, Firefox, Safari或Edge浏览器（使用Web进行查看页面时，不支持使用IE10内核以下版本进行查看）。

安装过程

根据Xvisual版本和使用的操作系统，Xvisual可以通过不同的方式安装，下面将详细介绍。

1、在Windows上安装IDE

1.1 下载并运行安装包

从 中科时代官方网站下载 Xvisual IDE 的最新安装包Setup_Xvisual IDE.exe。双击运行安装程序，选择启动安装向导。

1.2 管理员权限

如果系统提示需要管理员权限来运行安装程序，请确认允许。Xvisual IDE 的安装程序可能会要求管理员权限来写入系统文件和注册表项。

1.3 安装向导

在安装向导中，点击“下一步”按钮。你将会看到用户许可协议，阅读并同意条款后，点击“我接受”继续安装。

1.4 安装是否保留现有配置

若宿主机安装有旧版本且未卸载，则会出现以下界面。可选择是否保留现有配置，选“是”，则保留现有配置安装，选“否”，则执行全新安装，不再保留之前配置。

1.5 安装 .NET 8 Desktop Runtime

Xvisual IDE 依赖 .NET 8 Desktop Runtime 来支持其应用程序运行环境。在安装过程中，安装程序会自动安装或更新到最新版本的 .NET 8 Desktop Runtime。这一步可能会耗时较长，请耐心等待。

1.6 完成安装

安装完成后，点击“完成”按钮，Xvisual IDE 会自动启动。默认情况下，安装程序会将 Xvisual IDE 安装到 C:\Xvisual\Xvisual IDE 目录。安装程序将在桌面和开始菜单中自动创建 Xvisual IDE 的快捷方式。完成安装后，你可以通过这些快捷方式快速启动 Xvisual IDE。

2、在Windows上安装RTE

2.1 下载并运行安装包

从 中科时代官方网站下载 Xvisual RTE 的最新安装包，如Setup_Xvisual RTE.exe。双击运行安装程序，选择启动安装向导。

2.2 管理员权限

如果系统提示需要管理员权限来运行安装程序，请确认允许。Xvisual RTE 的安装程序可能会要求管理员权限来写入系统文件和注册表项。

2.3 安装向导

在安装向导中，点击“下一步”按钮。你将会看到用户许可协议，阅读并同意条款后，点击“我接受”继续安装。

2.4 安装是否保留现有配置

若宿主机安装有旧版本且未卸载，则可选择是否保留现有配置。若选择“否”，则会提示配置网站目标端口。若未安装旧界面，则无此界面。

2.5 安装配置依赖项

Xvisual RTE依赖 .NET 8 Runtime 与ASP.NET Core Hosting来支持其应用程序运行环境。在安装过程中，安装程序会自动安装并配置到最新版本的依赖项。这一步可能会耗时较长，请耐心等待。

2.6 完成安装并重启

默认情况下，安装程序会将 Xvisual RTE安装到 C:\Xvisual\Xvisual RTE目录。

2.7 访问 Xvisual

重启完成后，Xvisual RTE 服务将会自动启动。你可以在浏览器中通过服务器的 IP 地址或主机名访问 Xvisual RTE，默认使用 HTTP 端口 80。例如：

http://<your-server-ip>/

默认登录页面将显示 Xvisual 的用户界面，默认的管理员账号为 Admin，密码为 Xvisual。

3、在Unbutu上安装RTE

3.1 下载并拷贝安装包

从 中科时代官方网站下载 Xvisual RTE 的最新部署包和安装脚本。将下载的文件拷贝到目标服务器的任意目录下。

3.2 运行安装脚本

打开终端，切换到存放安装包和脚本的目录，使用以下命令执行安装：

sudo bash ./install.sh

3.3 管理员权限运行

由于安装过程中涉及到系统文件的修改和软件依赖的安装，Xvisual IDE 的安装脚本需要 root 权限。运行脚本时，系统会提示输入 root 密码。确保你有足够的权限来完成安装。

3.4 安装配置依赖项

Xvisual RTE 依赖于 .NET 8 Runtime 来支持其应用程序运行环境。安装过程中，安装程序会自动下载和配置依赖项。.NET 8 Runtime是 Xvisual RTE 的核心依赖项，用于运行相关的服务和应用。依赖项安装可能会根据系统性能耗时较长，请耐心等待。

3.5 完成安装并重启

默认情况下，Xvisual RTE 将被安装到 /opt/xvisual 目录。

3.6 访问 Xvisual

重启完成后，Xvisual RTE 服务将会自动启动。你可以在浏览器中通过服务器的 IP 地址或主机名访问 Xvisual RTE，默认使用 HTTP 端口 80。例如：

http://<your-server-ip>/

默认登录页面将显示 Xvisual 的用户界面，默认的管理员账号为 Admin，密码为 Xvisual。

更新安装

1、在Windows上安装IDE

1.1 下载最新版本的安装程序

从 中科时代官方网站下载最新版的 IDE 安装包。安装包会覆盖旧的版本。

1.2 运行新版本安装程序

双击运行新版本的安装程序。后续的安装流程与初次安装相同。安装程序会自动检测并更新现有的 IDE 安装，无需卸载旧版本。

2、在Windows上安装RTE

2.1 下载最新版本的安装程序

前往 Xvisual 的官方网站下载最新版的 RTE安装包。安装包会覆盖旧的版本。

2.2 运行新版本安装程序

双击运行新版本的安装程序。后续的安装流程与初次安装相同。安装程序会自动检测并更新现有的 RTE 安装，无需卸载旧版本。

3、在Unbutu上安装RTE

3.1下载最新版本的程序包与安装脚本

前往 中科时代官方网站 下载最新的 Xvisual RTE 版本的程序包和对应的 install.sh 安装脚本。

3.2 运行新版本安装程序

和初次安装类似，切换到下载目录，运行以下命令来执行更新：

sudo bash ./install.sh

安装程序会自动检测并更新现有的环境和 RTE 安装，不需要事先卸载旧版本。

卸载过程

1、在Windows上卸装IDE

如果你希望卸载 Xvisual IDE，可以通过 Windows 系统的“设置”或“控制面板”进行卸载。

在 Windows 10/11 系统中，进入“设置” > “应用” > “应用和功能”，找到 Xvisual IDE，点击“卸载”。

在较早的 Windows 版本中，可以通过“控制面板” > “程序和功能”找到 Xvisual IDE 并选择卸载。

2、在Windows上卸装RTE

如果你希望卸载 Xvisual RTE，可以通过 Windows 系统的“设置”或“控制面板”进行卸载。

在 Windows 10/11 系统中，进入“设置” > “应用” > “应用和功能”，找到 Xvisual RTE，点击“卸载”。

在较早的 Windows 版本中，可以通过“控制面板” > “程序和功能”找到 Xvisual RTE 并选择卸载。

3、在Unbutu上卸装RTE

如果你希望卸载 Xvisual RTE，可以通过提供的 uninstall.sh 脚本来进行卸载。卸载脚本会删除 Xvisual RTE。执行以下命令：

sudo bash ./uninstall.sh

卸载脚本会删除 /opt/scada 目录以及与 Xvisual RTE 相关的服务和配置文件。如果需要保留项目文件或数据库文件，请提前备份。

卸载完成后， .NET 8 Runtime 仍在系统中，因为它们可能是为其他应用安装的。如果仅供 Xvisual RTE 使用，可以手动卸载这些依赖项：

sudo apt remove dotnet

快速操作指南

一、前期准备

1. 系统与权限检查

   • 确保操作系统符合要求（Windows Server 2016/2019/2022、Windows 10/11，或 Linux-Ubuntu）

   • 已安装 .NET 8 Runtime（IDE/RTE 依赖）

2. 下载软件包

   • 从中科时代官网下载最新版本的 Xvisual IDE 和 RTE 安装包

二、创建并配置项目

1

2

3

三、核心配置流程

1. 创建通信节点

   1
   
   2
   

2. 创建设备

   1
   
   2
   

3. 创建点位（Tag）

1

2

3

4

5

6

7

8

9

10

11

四、创建视图

1

右键点击
2

3

五、读写通道绑定

绑定通道可以将Xvisual和PLC里的点位进行交互

1

2

3

4

5

6

7

8

9

10

输⼊发布设备的IP:80（如： 192.168.110.158:80）
11

12

六、数据显示转换

可以将从PLC里读取的数据进行格式转化

1

2

3

4

5

6

输入发布设备的IP:80（如：192.168.110.158:80）

7

8

七、数据截取

可以将从PLC中获得的数据进行截取（如下演示：保留两位小数）

1

2

3

4

5

6

7

输入发布设备的IP:80（如：192.168.110.158:80）
8

9

八、设置事件

设置事件是Xvisual的核心功能，可以按需设计，执行多种操作（如下演示：背景更换）

1

2

3

4

5

6

7

8

9

10

11

12

13

输⼊发布设备的IP:80（如： 192.168.110.158:80）
14

15

功能介绍

1. 创建项目

1.1 新建项目

Xvisual的配置是在项目基础上进行的。项目是存储在项目目录中的一组不同格式的文件。要创建和编辑项目，请使用Xvisual IDE应用程序。当Xvisual IDE启动时，将打开“起始页”，其中包含创建新项目或打开现有项目的按钮。

创建新项目的弹窗中输入需要添加的项目名称和选择项目创建的位置；模板定义了添加到项目中的初始配置，可选择另一个现有项目可以用作新项目创建的模板。

1.2 项目结构

Xvisual项目的结构显示在项目的资源管理器中，该资源管理器位于Xvisual IDE窗口的左侧。项目主要包括以下几个部分:

• 系统配置，用于管理当前项目的通信节点、设备、点位、用户以及角色信息

• 应用实例，用于管理项目中的组件与设备、节点信息的通信和储存

• 视图管理，用于管理项目中绘制以及展示的页面信息

• 资源管理，主要进行当前项目中的图片信息管理
  
  

1.3 项目一般配置顺序

开始使用Xvisual时，建议遵循下面描述的一般配置顺序。在获得一些经验，更好地理解应用程序之间的依赖关系之后，可以改变顺序以提高效率。

1.3.1 创建项目
在Administrator应用程序中创建新项目或打开现有项目。

1.3.2 创建通信节点
创建或者重新打开项目后，可使用工具栏或者向导添加通信节点。

1. 使用工具栏添加通信节点。
   
2. 使用向导添加通信节点 。
   
3. 添加通信节点设置界面。
   

1.3.3 创建设备
在建立通信节点之后，使用工具栏或者向导添加设备。

1. 使用工具栏添加设备。
   
2. 使用向导添加设备。
   
3. 添加设备设置界面，可对设备名称进行设置以及选择设备类型和通信节点。
   
4. 设备属性说明界面展示设备状态和部分近期数据；点击“设备属性”按钮进入详细的属性设置界面。
   
5. 添加OPC地址，在服务器URL中添加相应的URL,点击连接按钮，若连接成功会显示可传输数据的设备，勾选想要连接的设备，点击添加再点击保存；若连接失败则检查服务器URL是否有问题。
   

1.3.4 创建点位
在建立设备之后，使用工具栏或者向导添加点位。
1. 使用工具栏添加点位。

2. 使用向导添加点位。

3. 添加点位后，弹出创建点位的弹窗，设置步骤一为选择设备，需选择新增的点位所在的通信节点和设备。

4. 创建点位步骤二为选择新创建的点位的对象，其中设备为步骤一中勾选的设备，可实例管理中查看所有对象。

5. 创建点位步骤三为分配点位号，其中设备为步骤一中勾选的设备，点位为该设备上可传输的点位信息。

1.3.5 创建视图
可在创建了通信节点、设备和点位之后，创建视图文件夹和视图，获取更丰富的数据信息；也可在项目创建后直接创建视图进行视图编辑。

1.3.6 发布配置
1. 完成以上配置后可在栏目中选择“发布”按钮，将配置好的项目进行发布操作。

2. 发布配置界面可对实例名称和相关选项进行设置。

解释说明：
      实例是安装在同一台计算机上运行同一项目的一组Xvisual应用程序。
      单个项目可以包含多个交换数据的实例。管理员应用程序可以连接到远程服务器，因此Xvisual的配置和控制可以由一个工程师使用一个工作站进行。

2. 系统配置

系统配置模块进行项目数据的实例管理，通信节点管理，设备管理，点位管理，用户管理，角色管理。
2.4 点位管理
点位是一个具有数字和名称的实体，当前和历史数据以及事件都与点位相关联。其他系统中的同义词:variable和tag。
2.4.1 创建点位
在建立设备之后，使用工具栏或者向导添加点位。
1. 使用工具栏添加点位。

  2. 使用向导添加点位。

  3. 添加点位后，弹出创建点位的弹窗，设置步骤一为选择设备，需选择新增的点位所在的通信节点和设备。

  4. 创建点位步骤二为选择新创建的点位的对象，其中设备为步骤一中勾选的设备，可实例管理中查看所有对象。

  5. 创建点位步骤三为分配点位号，其中设备为步骤一中勾选的设备，点位为该设备上可传输的点位信息。

2.4.2 克隆点位
克隆点允许基于现有点位快速创建类似点位。通过Administrator应用程序的工具> 项目工具菜单访问克隆工具。

      可在克隆表单上指定源和目标点位号，也可为克隆的点位选择新的对象和设备。

2.4.3 点位特性设置
打开点位管理后，在表中选择需要修改的点位，然后单击按钮或双击表行打开点位属性弹窗。在点位属性表单中编辑点位。打开点位管理后，在表中选择需要修改的点位，然后单击按钮或双击表行。
1. 通用页可以编辑点位的名称、数据类型和数据长度。如果未指定数据类型，则使用Double类型。若指定了数据类型且大于1，则Server应用程序将创建几个具有序号的点位。在同名的表中描述了点位类型。标签代码字符串字段用于连接通信器中的点位和设备标签。

  2. 限制页可以设置一个限制记录被一个或多个点位使用。在第二种情况下，将限制标记为共享。如果在创建限制时启用了bind to channels选项，那么该限制的实际值就是在创建限制时指定的点位号的值。

  3. 存档页可以指定数据存储在哪一个存档中。如果未选择归档，即归档掩码为空或等于0，则点位数据存储在默认归档中。

  4. 在事件页上，设置与点位相关的事件记录在事件存档中的标准。

2.4.4 导入、导出表
用于导入和导出配置数据库表的工具使得使用以前从其他项目中完成的工作变得更加容易。通过Administrator应用程序的工具>项目工具菜单访问导入和导出工具。支持DAT、XML和CSV表格式。如果需要限制导入导出数据的范围，请指定起始id和结束id。
1. 通过Administrator应用程序的工具>项目工具菜单访问导入和导出工具

2. 导入表界面。

3. 导出表界面。

2.5 用户管理
用户管理模块用于管理项目中的用户信息，系统内置了admin和guest用户，内置用户，不允许编辑和删除；使用者可以根据需求进行自定义用户的添加，编辑，删除操作，可以给用户分配不同的角色权限。
2.5.1 创建用户
使用者点击用户管理的“添加”按钮，进行自定义用户的添加操作。

2.5.2 编辑用户
双击需要更新的用户信息，进行用户的编辑操作，完成后，点击提交按钮，进行用户信息编辑；登陆账号不允许编辑修改。

2.5.3 删除用户
删除用户时需要先选中用户，然后点击删除按钮进行删除，之后点击提交按钮同步信息至服务器端完成信息同步。

2.6 角色管理
角色管理模块管理项目中的所有角色信息，以及角色对应的打开视图权限信息。

2.6.1 内置角色
内置角色是系统自带的角色，不能更改角色名称、启用状态、描述信息，不可进行删除操作。

2.6.2 自定义角色
自定义角色是由项目管理人员创建的角色。创建角色编号从100开始，角色名、默认视图、启用状态、描述信息均可进行编辑，角色被用户使用后不可进行删除操作。

2.7 结构模板管理
当前模块进行料表的模板文件管理操作，可以进行模板的添加、编辑、查询、删除、导入、导出操作。
模板添加操作：

模板编辑操作，双击模板名称进入到选中模板编辑弹窗：

模板删除操作，选中需要删除的模板，点击删除按钮：

2.8 料表管理
料表管理模块，主要进行料表参数数值的配置，用户可以进行料表的添加、编辑、删除、导入、导出操作。
料表添加，用户点击料表添加按钮，出现添加弹窗后，选择料表模板，之后填写参数信息，进行保存：

料表编辑，用户双击需要编辑的料表名称，进入到料表编辑弹窗界面，修改参数值后，进行保存，完成料表的编辑操作：

料表删除操作，选中需要删除的料表，点击删除按钮，完成二次确认后进行删除：

3. 应用实例

3.1 服务器

3.1.1 数据存储

数据存储模块主要进行当前项目的数据持久化存储设置，包括趋势缓存、实时存储、统计存储三部分。数据存储功能主要用于后续图表组件的数据源，在规则不启用时，不进行存储操作。

3.1.1.1 趋势存储

  1. 仅需启用【规则启用】开关
  2. 缓存覆盖周期分别为15s、30s、60s
  3. 无独立数据库配置（依赖系统默认缓存区）
  4. 字符/结构体存储开关（位于界面底部），关闭时忽略非数值型数据。

3.1.1.2 实时存储

  1. 开启【规则启用】
  2. 调整采样频率：【抽样存储间隔】设置（100ms-30s）
  3. 数据库连接配置：
    - 类型​：选择 InfluxDB
    - 地址​：填写完整URL（如 http://127.0.0.1:8086）
    - 用户名/密码：输入认证信息
    - 数据库名​：必填项
  4. 点击 连接测试 验证连通性。

3.1.1.3 统计存储

  1. 开启【规则启用】
  2. 设置【缓存覆盖周期】：覆盖周期过长可能会导致存储控件不足
  3. 数据库连接配置：
    - 类型​：选择 PosgresSQL、MySQL、SQLite（无需配置，系统默认存储）
    - 地址​：输入服务器IP（如 127.0.0.1）
    - 端口​
    - 用户名/密码：输入认证信息
    - 数据库名​：填写目标数据库名称
  4. 点击 连接测试 验证配置有效性。

3.2 Communicator

项目中的通信节点和设备都在Communicator模块中进行管理。
3.2.1 通信节点
3.2.1.1 添加通讯节点
通信节点的添加可通过三种方式进行，工具→向导→添加通讯节点、点击菜单栏的添加通讯节点按钮、Communicator中的“通信节点”右键。

3.2.1.2 删除通信节点
选中需要删除的通讯节点，鼠标右键出现选择菜单后，点击“删除通讯节点”，出现二次确认弹窗后，确认删除进行删除操作。

3.2.2 设备
3.2.2.1 创建通信设备
添加通讯节点成功后，可以通过工具栏添加设备，可以通过工具-向导添加设备，可以通过通讯节点右键添加设备。
1. 使用工具栏添加设备。

    2. 使用向导添加设备。

    3. 通信节点添加设备。

    4. 设备添加类型默认是OPCUA，可以选择Acp、Modbus、OPCUA、自定义数据类型及Simulator五种。

3.2.2.2 设备管理

3.2.2.3 配置属性
1. Acp设备
1. 在应用实例中点击“通信节点”下的Acp设备，可查看设备基础参数，点击“设备属性”按钮会进入属性设置界面。

      2. 在属性设定界面输入服务器IP，点击“连接”按钮，勾选需要监测的设备点击添加，点击“保存”按钮保存数据。

    2. OPCUA设备
      1. 在应用实例中点击“通信节点”下的OPCUA设备，可查看设备基础参数，点击“设备属性”按钮会进入属性设置界面。

      2. 在属性设定界面输入服务器URL，点击“连接”按钮，勾选需要监测的设备点击添加，点击“保存”按钮保存数据。

    3. MODBUS设备
      1. 在应用实例中点击“通信节点”下的MODBUS设备，可查看设备基础参数，点击“设备属性”按钮会进入属性设置界面。

      2. 选择Modbus TCP协议，编辑模板。

      3. 在MODBUS设备模板编辑器中添加成员。

    4. 自定义数据类型设备
      1. 在应用实例中点击“通信节点”下的自定义数据设备，可查看设备基础参数，点击“属性”按钮会进入属性设置界面。

      2. 在自定义数据设备管理页面，可进行自定义数据的查询、数据单个添加、编辑、删除、数据文件导出、数据文件导入、模板文件下载功能。

3.3 Xvisual
Xvisual的ApplicationOptionsNode可以设置用户是否需要首次登录以及用户权限校验有效时长。
启动首次登录校验默认开启，此时用户在打开web页面后需要登录才能进入设置页面；选择否，则在进入web页面时，不需要登录，默认使用guest用户登录进入设置的默认视图页面。

设置权限的选项代表角色权限校验成功后的有效时长，永久代表校验一次一直有效；点击即关闭代表操作一次后权限失效；按照Session时间，需要用户自己设定权限时长，默认单位为秒。

4. 视图管理

视图管理是Xvisual软件的核心功能，用户在当前模块完成视图文件的绘制，以及通道与展示页面的数据交互设置。当前部分分视图文件管理、视图绘制两部分介绍。

4.1 视图文件管理

4.1.1 视图添加

视图文件管理分视图和视图文件夹两部分，系统默认会在视图管理添加一个视图DefaultView，用户也可通过使用鼠标右键点击“视图管理”，进行视图文件夹或者视图文件的创建操作，同名视图与同名文件夹不允许添加。

4.1.2 视图编辑

鼠标右键点击已添加完成的视图或者视图文件夹，可以进行视图文件或者视图文件夹的名称编辑修改操作。

4.1.3 视图删除

视图文件和视图文件夹的删除操作，都是鼠标右键点击需要删除的目标文件，点击删除按钮，进行删除操作，已经打开的视图或者被设置为默认视图的文件不允许删除。

4.2 视图绘制

视图绘制是在打开的视图文件中，进行操作，整体分为三部分，分别是视图组件、绘制画布、组件属性三部分，其中视图组件又分为组件、视图结构、源码三部分。

4.2.1 组件

组件是指用于绘制图纸的基本构成单元，包括系统默认提供的基础系统组件，用户还可自主创建页面视图组件，用户绘制重复性的画布模板。

一般操作步骤
步骤一：拖拽组件到图纸
1. 在组态编辑器中，点击左侧面板的组件按钮，切换到组件tab页。
2. 在组件中找到需绘制的组件，然后将该组件拖拽到画布中。
步骤二：配置组件
1. 配置属性：选中拖拽到画布的组件，在右侧面板中，输入组件属性信息。
2. 配置数据绑定：在属性面板的数据tab页内，选择通道，设置数据转换内容。
3. 配置组件外观：在右侧面板中，点击“外观”切换到组件外观设置页面，设置组件的外观样式，也可编写自定义css代码设置样式。
4. 配置组件时间：在右侧面板中，点击“事件”切换到组件事件设置页面，点击选择事件触发类型，并自行编写事件触发内容及执行结果。
在组件页内，用户可以使用模糊搜索快速查找到所需组件。查找时仅需输入组件的关键字，点击查询icon或回车即可搜索到相关组件。

4.2.2 视图结构

视图是组态编辑器内全部使用组件的结构，使用方法如下：
i. 在组态编辑器中，点击左侧⾯板的组件按钮，切换到组件tab⻚。
ii. 点击视图树按钮，切换到视图tab⻚。

在视图结构页内，用户可以使用模糊搜索快速查找到所需组件元素。查找时仅需输入组件的关键字，点击查询icon或回车即可搜索到相关组件。

4.2.3 源码

源码是组态编辑器内全部使用组件的源码结构，使用方法如下：

在组态编辑器中，点击左侧⾯板的组件按钮，切换到组件tab⻚。
点击源码按钮，切换到源码tab⻚。
点击指定组件，即可查看该组件的源码内容。

在源码页内，可以根据业务要求直接调整组件的属性内容，如组件名称、字体大小等。也可自行复制源码，将内容导入到其他绘制页面内。Xvisual的组态编辑器源码为json格式，全部页面内容最终嵌套至一个json文件内。

4.2.4 画布

画布是用于绘制图纸和图标的操作区域，在组态编辑器的中心区域。所有组件都将在画布区域进行展示、摆放。当画布大小超过编辑器大小区域时，将出现滚动条。

画布一键清空，具体使用方法为，选择最外层组件（自由容器），点击删除清空按钮，页面内的全部组件将会被全部清空。

4.2.5 属性栏

属性栏位于编辑器的右侧，默认显示展开模式，也可点击收起按钮。属性栏包含属性、外观、事件三部分。
4.2.5.1 属性
属性信息包含组件的基本信息、数据信息内容，不同组件内的属性信息不一致，具体信息内容详见组件列表内描述。

属性信息新增角色绑定按钮，用户可以设置组件触发事件后指定角色下的用户具有操作权限。

4.2.5.2 外观
外观信息包含组件的基本外观信息、背景信息、位置尺寸信息以及自定义样式，不同组件内的外观内容设置不一致，具体内容详见组件列表内描述。

4.2.5.3 事件
事件为用户自定义的达到某一执行条件的触发性事件操作。如输入框发生数值变化、获取焦点、失去焦点等。在时间内可以进行弹窗、自定义js以及指令下发操作。如下图所示：

一般操作步骤
步骤一：添加事件
1. 在组态编辑器中，选中需要设计的组件，点击右侧属性栏的“事件”切换到事件栏。
2. 点击“添加事件”，选择事件的触发条件并创建该类型事件。
步骤二：添加动作
1. 选择需要添加的时间，点击创建，弹出时间创建页面。
2. 选择触发时间类型，填写事件内容。

4.2.5.4 自定义函数
自定义函数可方便用户自行定义数据处理及转换。自定义函数支持逻辑函数、数学函数、文本函数、日期函数、数组、编码、其他等操作。出现在属性和事件中需要对数据转换的部分。

函数操作步骤如下：
1. 打开自定义函数弹窗，选择需要设定的函数。
2. 在函数内输入需要调整当前层的变量。
3. 点击确定，数据回显至自定义函数内容文本框。
自定义函数中使用的变量可使用自由容器内的设定key值，也可使用当前页面内的组件字段名，也可使用当前绑定的通道。使用key值或组件字段名时，直接输入字段名或key即可。如使用通道，则需通道编号前加，例如需使用2号通道数值，则使用2。

5. 组件介绍

5.1 输入组件

5.1.1 输入框

用于单选文本输入和展示的表单组件。输入类型包含文本、邮箱、密码、URL，当选择邮箱时自动开启输入完成验证是否符合邮箱规支持。属性及事件如下表所示：

操作实例

5.1.1.1 绑定读通道

• 在单独组件（如文本输入框）进行读通道绑定之前，需完成单独组件所在自由容器的读通道绑定
  
  

• 点击“文本输入框”，在属性栏的“属性”部分点击“数据”部分读通道的编辑按钮。
  

• 在“通道绑定”界面选择需要读取的通道并确认。
  

5.1.1.2 数据转换

1. 点击“文本输入框”，在属性栏的“属性”部分点击“数据”部分数据转换的fx按钮进入函数设定页面或者直接点击空白部分进行数据转换格式编辑。
   

• 在函数设定界面，左侧选择想要选取的函数类型，后侧选择需要参与函数的变量。
  

• 最大长度&最小长度

1. 点击“文本输入框”，在属性栏的“属性”部分点击“数据”部分最大长度或者最小长度的按钮，进行限制字符数和错误提示的编辑。
   

• 必填

1. 点击“文本输入框”，在属性栏的“属性”部分点击“数据”部分必填的按钮。
   

5.1.2 多行文本框

用于需要换行输入的文本组件。支持属性及事件如下表所示：

操作实例

5.1.2.1 绑定读通道

参考文本框输入的绑定读通道操作。

5.1.2.2 数据转换

参考文本框输入的数据转换操作。

5.1.3 数字输入

用于需要输入数字的组件，支持设定最大值和最小值以及步长与精度。支持属性及事件如下表所示：

5.1.3.1 选项新增

1. 点击“数字输入框”，可在属性栏的“属性”部分对单位选项进行编辑。
   
   

5.1.4 复选框

可通过options配置多个勾选框或者通过source拉取选项的复选框组件。支持属性及事件如下表所示：

操作实例

5.1.4.1 自定义选项

1. 点击“复选框”，在属性栏的“属性”部分点击“数据”部分的自定义选项。
   

• 对复选框内容和数量进行编辑，选项不可重复，重复则提示“当前选项重复，请重新输入”。
  

5.1.4.2 通道数据

1. 点击“复选框”，在属性栏的“属性”部分点击“数据”部分的通道数据，通道绑定数据点位（参考文本输入框的绑定读通道）；选择字符分割选项时分割字符选项必填，通道返回字符串按照指定分割字符进行拆分，拆分完成元素回填至下拉列表。
   

5.1.4.3 新增选项

1. 点击“可创建”按钮可以在展示部分增加“新增选项”，用户自由编辑选项。
   

5.1.5 单选

可通过 options 配置选项或者通过 source 拉取选项的单选组件。支持属性及事件如下表所示：

操作实例

5.1.5.1 自定义选项

参考4.4.4复选框的自定义操作，新增“默认选择第一项”。

5.1.5.2 通道数据

参考4.4.4复选框的通道数据操作，新增“默认选择第一项”。

5.1.6 开关

开关控件。属性及事件如下表所示：

操作实例

5.1.6.1 绑定读通道

参考4.4.1文本框输入的绑定读通道操作。

5.1.6.2 数据转换

参考4.4.1文本框输入的数据转换操作。

5.1.6.3 值格式

点击“开关”，在属性栏的“属性”部分点击“数据”部分的值格式，设置开关改变时的参数格式，默认为布尔类型。

5.1.7 滑块

选择某个值或者某个范围的滑动组件。属性及事件如下表所示：

操作实例

5.1.7.1 绑定读通道

参考4.4.1文本框输入的绑定读通道操作。

5.1.7.2 数据转换

参考4.4.1文本框输入的数据转换操作。

5.1.7.3 滑块分块

点击“滑块”，在属性栏的“属性”部分点击“轨道”部分的分块，可根据业务进行滑块进度条的分块设置。

5.1.7.4 双滑块

点击“滑块”，在属性栏的“属性”部分点击“数据”部分的双滑块，可在进度条两端同时设置滑块。

5.2 基础组件

5.2.1 按钮

配置不同的展示样式和点击行为的按钮组件。属性及事件如下表所示：

操作实例

5.2.1.1 绑定读通道

参考4.4.1文本框输入的绑定读通道操作。

5.2.1.2 数据转换

参考4.4.1文本框输入的数据转换操作。

5.2.1.3 点击事件

1. 点击“按钮”，在属性栏的“事件”部分默认存在“点击”事件。
   

• 点击“+”，进入动作配置页面。
  
  

5.2.2 文字

展示文字或者段落，支持模板语法可用来关联动态数据的文本组件。属性及事件如下表所示：

5.2.2.1 绑定读通道

1. 参考文本框输入的绑定读通道操作。

5.2.2.2 数据转换

1. 参考文本框输入的数据转换操作。

5.2.2.3 最大长度

1. 参考文本框输入的最大长度操作。

5.2.3 下拉列表

支持多选和输入提示，可使用 source 获取选项的下拉框组件。属性及事件如下表所示：

操作实例

5.2.3.1 自定义选项

参考4.4.4复选框的自定义选项操作。

5.2.3.2 通道数据

参考4.4.4复选框的通道数据操作。

5.2.3.3 选项设定

点击“按钮”，在属性栏的“属性”部分中高级部分可对选项值内容进行检查，选项个数和高度进行设置。

5.2.4 图片

支持静态设置图片地址的图片组件，可配置 name与变量关联。属性及事件如下表所示：

操作实例

5.2.4.1 读通道绑定

参考4.4.1文本输入框的读通道绑定操作。

5.2.4.2 数据转换

参考4.4.1文本输入框的数据转换操作。

5.2.4.3 图片管理

• 点击进入资源管理中的图片管理。
  

• 点击“添加图片资源”进行图片添加操作，也可进行批量添加操作。
  

• 图片添加成功后会在图标管理中显示。
  

5.2.4.4 图片使用

1. 点击“图片”组件，在属性栏的“属性”部分的图片文件点击“编辑”按钮。
   

2. 进入图片选择界面，选择想要上传的图片，点击“保存”完成操作。
   

• 完成上传工作后，视图中的图片组件内容更新为用户选择的图片。
  

5.2.5 进度条

显示百分比或当前进度的进度条组件 ，进度条无事件功能。属性及事件如下表所示：

操作实例

5.2.5.1 读通道绑定

参考文本输入框的读通道绑定操作。

5.2.5.2 数据转换

参考文本输入框的数据转换操作。

5.2.5.3 默认进度

点击“进度条”，在属性栏的“属性”部分中数据部分进行默认进度的设置，可直接输入参数或者函数输入。

5.3 布局容器

5.3.1 容器

可将多个组件放置在一起的容器组件。属性及事件如下表所示：

操作实例

5.3.1.1 边距边框设置

点击“容器”，在属性栏的“属性”和“外观”部分中进行“边距”和“边框”设置。

5.3.2 自由容器

支持直接子元素支持拖拽调整位置的自由容器组件。属性及事件如下表所示：

操作实例

5.3.2.1 边距边框设置

点击“自由容器”，在属性栏的“属性”和“外观”部分中进行“边距”和“边框”设置。

5.3.3 状态容器

根据状态进行组件条件渲染的状态容器，方便设计多状态组件。属性及事件如下表所示：

操作实例

5.3.3.1 状态设置

点击“状态容器”，在属性栏的“属性”中进行状态修改和状态新增操作。

5.3.4 折叠面板

可用于信息量较大且分类较多时进行分类收纳的折叠面板组件。属性及事件如下表所示

操作实例

5.3.4.1 内容修改

点击“折叠器”内需要修改的部分进行修改，右侧属性栏可以进行位置调整。

5.3.4.2 折叠器事件

折叠器新增事件：折叠状态改变、折叠器展开和折叠器收起。

5.3.5 选项卡

可用于内容分组的选项卡组件。属性及事件如下表所示：

操作实例

5.3.5.1 选项卡编辑

点击“选项卡”，在属性栏的“属性”部分进行选项卡内容的编辑。

5.3.5.2 选项卡切换

点击“选项卡”，在属性栏的“事件”部分进行可添加事件“选项卡切换”，可用于选项卡切换

5.4 表单项组件

5.4.1 级联选择器

支持选项中含有子项的级联选择器组件，可通过 source 拉取选项，支持多选。属性及事件如下表所示：

操作实例

5.4.1.1 自定义选项

1. 点击“级联选择器”，在属性栏的“属性”部分点击“数据”部分的自定义选项。
   

• 在选择管理页面添加需要的级联选项，点击确认进行保存。
  

5.4.1.2 通道数据

1. 点击“级联选择器”，在属性栏的“属性”部分点击“数据”部分的通道数据。
   

• 读通道使用参考4.4.1文本输入框的读通道绑定操作，加载状态分为“合并到上层loading”、“不展示loading”和“使用页面全局loading”。
  

5.4.2 勾选框

勾选框组件。属性及事件如下表所示：

5.4.2.1 值格式

参考4.4.6开关的值格式设定操作。

5.4.2.2 校验规则

1. 点击“勾选框”，在属性栏的“属性”部分点击“校验”部分的“+”。
   

• 可选择多项校验规则。
  

5.4.3 字段集

可支持嵌入其他组件的字段集组件，不支持外观等其他设置。属性及事件如下表所示：

5.4.3.1 新增和修改子组件

1. 点击“字段集”，在“属性”部分点击“添加子表单项”后左侧组件的表单项中选择需要添加的表单项。
   

• 在组件栏的搜索框中删除“展示”词条后会展示所有可添加在卡片中的组件。
  
  

• 点击左侧视图结构的组件大纲，点击需要编辑的组件标题，在右侧会出现单独组件的属性栏，各组件操作方式同原组件操作方式相同。
  

• 点击“字段集”后可在子表单展示模式中选择各组件的展示关系。
  

5.5 功能组件

5.5.1 文字提示

文字显示组件。类似容器，可将多个渲染器放置在一起，当用户鼠标悬停或者点击容器时，显示文字提示浮层。属性及事件如下表所示：

5.5.2 iFrame

可用来嵌入现有页面的组件。属性及事件如下表所示：

5.6 展示组件

5.6.1 卡片

支持嵌入其他组件的卡片组件。属性及事件如下表所示：

操作实例

5.6.1.1 新增和修改子组件

1. 点击“卡片”，在属性栏的“属性”部分点击“新增”后左侧组件的表单项中选择需要添加的表单项。
   

• 在组件栏的搜索框中删除“展示”词条后会展示所有可添加在卡片中的组件。
  
  

• 点击左侧视图结构的组件大纲，点击需要编辑的组件标题，在右侧会出现单独组件的属性栏，各组件操作方式同原组件操作方式相同。
  

5.6.2 状态显示

根据关联字段来展示状态的图标组件，比如 1 展示 √、0 展示 x。属性及事件如下表所示：

操作实例

5.6.2.1 状态变更

点击“状态显示”，在属性栏的“属性”部分对默认值项进行修改，默认值为1时显示为√，默认值为0时显示为x。

5.6.3 步骤条

Steps 步骤条组件。属性及事件如下表所示：

操作实例

5.6.3.1 修改步骤列表

点击“步骤条”，在属性栏的“常规”部分对步骤列表进行修改，可修改副标题和描述，也可以添加新步骤。

5.6.3.2 修改步骤状态

1. 点击“步骤条”，可在属性栏“常规”部分的当前步骤进行序号编辑。
   

• 在“当前步骤”部分对选中的序号步骤进行编辑，存在“进行中”、“等待”、“完成”和“出错”四个状态。
  
  

5.6.4 石墨盘组件

5.7 图表组件

5.7.1 柱状图

柱状图组件。属性及事件如下表所示：

操作实例

5.7.1.1 数据类型

5.7.2 折线图

折线图组件。属性及事件如下表所示：

5.7.3 饼图

饼图组件。属性及事件如下表所示：

6. 事件-动作配置

6.1 弹窗消息

6.1.1 打开弹窗

该事件主要操作为打开弹窗，弹窗内支持复杂的交互设计。

选择弹窗时，如果尚未创建弹窗，则可进行新建弹窗操作，也可选择已经创建过得该页面内的其他弹窗。弹窗新建时操作同其他组件在页面内的操作一致。

弹窗可支持复杂操作交互，如嵌套按钮、输入框、图表、表格等。弹窗内的组件属性、外观、事件设置同在外部页面操作一致。弹窗属性可设置其弹窗方式、标题、可拖拽性、快捷按键关闭等。

弹窗中的外观设置、事件设置操作同其他组件操作一致。

6.1.2 关闭弹窗

关闭弹窗也无需做其他设置，仅需创建该事件即可。

6.1.3 消息提醒

消息提醒需设置消息类型，填写消息内容。消息内容支持自定义函数填写。自定义函数填写内容详见自定义函数操作章节。同时还可设置弹出位置、持续时间等样式信息。标题内容同样支持自定义函数。

6.2 组件

6.2.1 组件可见性

可以控制所选的组件的显示或者隐藏状态以及维持状态的条件。

6.2.2 组件可用性

可以控制所选的组件的启用或者禁用状态以及维持状态的条件。

6.2.3 组件展示态

可以控制所选的组件处于表单输入或者静态状态。

6.2.4 变量赋值

可通过组件变量、页面参数或者内存变量的动作更新目标组件或变量的数据值。

6.2.5 背景调整

设置所选组件的背景属性，可设置背景的颜色。

6.2.6 位置调整

设置所选组件的位置属性，可选择需要定位的组件以及定位的具体位置。

6.2.7 图表请求数据

图表请求数据动作，可对当前视图中的图表组件进行数据刷新操作、图表数据时间范围重新设置、点位通道重新设定操作。

6.2.8 绑定数据

通过绑定数据组件，用户可以通过设置请求参数去请求需要的接口，把返回结果赋值给指定组件或者自定义的变量，展示在绘制的视图页面。目前系统内置了石墨盘数据、料表列表、料表详情三个服务接口，分别返回石墨盘渲染结果、料表列表数据、料表详情数据。用户也可使用自定义的接口进行结果绑定展示。

6.2.8.1 石墨盘数据
用户可通过设置组件事件进行请求石墨盘数据接口，把返回结果赋值给石墨盘组件进行预览或者渲染。

  第一步进行组件事件的动作选择（如点击事件、初始化事件等），选择“绑定数据”；
  第二步选择石墨盘数据请求接口，鼠标悬浮右侧问号图标可显示接口请求参数字段，下方请求参数会自动带出参数信息；
  第三步填写参数值信息，可以选择固定值数据、自定义函数数据、组件数据三种方式来当作请求参数的数值信息；
  第四步把请求接口获取的结果信息，赋值给需要展示的组件或者自定义变量中；
  最后点击确认按钮，进行事件动作保存

6.2.8.2 料表列表
料表列表接口无需填写请求参数，返回数据为当前项目中“系统配置-料表管理”中的料表列表信息，具体绑定数据接口操作，以及返回值赋值操作可参考“石墨盘数据”接口。
6.2.8.3 料表详情
料表详情接口根据用户传递的料表ID请求参数，返回料表的详情数据信息，具体绑定数据接口操作，以及返回值赋值操作可参考“石墨盘数据”接口。
6.2.8.4 自定义接口
选择自定义接口后，下方会出现自定义接口的输入框，用户可填写自己已经写好的服务请求地址，选择请求方式，添加请求参数，配置结果数据返回赋值，完成实际使用场景的使用。

6.2.9 视图加载

视图加载动作可进行当前视图页面某个容器在到达触发条件后，进行其他视图加载操作，如在主页面的中心位置通过点击不同按钮，展示不同的视图页面。

6.3 其他

6.3.1 自定义JS

在自定义js内容里面，用户可自行编写function内容，如对指定对象进行幅值，调整某一对象样式等。但当使用值变化方法或可能造成循环嵌套触发的操作时，需关注所调用组件的变化，以免出现循环递归问题。

function内的data为当前组态编辑器页面内的全局data对象，当需使用自定义的key对象时，仅需输入data.key即可使用，并设置value。如需使用其他页面内的数字，则输入该组件的字段名并进行使用。如需使用组件内绑定的通道，则在组件字段名后使用".$通道号"进行使用。

6.3.2 指令下发

在指令下发内容里面，用户可以完成向下通过数据下发。下发的数据可进行自定义或设置具体数值。具体操作步骤如下：

1. 设置向通道下发数据之前，需要在自由容器属性栏的属性界面中的写通道勾选目标通道
   

• 打开事件弹窗，选择指令下发。
  

• 点击新增下发点位，点击通道选择，弹出通道选择弹窗，在弹窗内勾选需要下发对应指令的通道，点击确定。指令弹窗内出现仅包含当前页面内自由容器已经添加的写通道列表，弹窗内只能选择一个通道。同时在同一个指令下发操作操作中，一个通道只能被绑定操作一次。
  

• 输入下发值或自定义函数设置下发值，点击自定义函数按钮可进入自定义函数设置页面。
  

• 选择指令模式，设置指令延迟时间。

指令下发内的延迟默认设定为固定模式，延迟时间为0。指令内容及指令时间支持固定数值或自定义函数方式。指令延迟时间当设定为自定义函数方式时，用户需自行保障函数最终输出数值为整数类型。

指令下发时间单位包含毫秒、秒、分钟，具体时间范围如下：

• 当选择毫秒时，最小不得小于100，最大不能超过1000，不在范围内输入框失去焦点时，显示临近的最近数值（如输入99，则显示100，输入1001则显示1000）

• 当选择秒时，最小不得小于1，最大不得超过60

• 当选择分钟时，最小不得小于1，最大不得超过60

7. 资源管理

7.1 添加图片

1. 点击进入资源管理中的图片管理。
   

• 点击“添加图片资源”进行图片添加操作，也可进行批量添加操作。
  

• 图片添加成功后会在图标管理中显示。
  

7.2 使用图片

1. 点击“图片”组件，在属性栏的“属性”部分的图片文件点击“编辑”按钮。
   

2. 进入图片选择界面，选择想要上传的图片，点击“保存”完成操作。
   

• 完成上传工作后，视图中的图片组件内容更新为用户选择的图片。