玄道智控平台

# 拼接器系统_使用说明_V01

# 引用名称说明：

protocol：为web协议,例如：http或https

host：为访问的主机,例如：127.0.0.1

port：为访问端口,默认为：9090

# 1. 拼接器首页整体预览

# 1.1 访问路径:

{protocol}: //{host}:{port}/#/

示例：http://127.0.0.1:9090/splicer/#/

# 1.2 界面预览：

img.png

# 1.3 功能说明(页面分4部分)：

  1. 屏幕墙列表（页面顶部）
  2. 工具栏（页面顶部）
  3. 屏幕显示区（页面中间部分）
  4. 信号源列表（页面底部）
  5. 场景列表（页面底部，与信号源列表切换）

img.png

# 2. 屏幕墙切换

# 2.1 页面位置：

进入首页 -> 页面正上方

# 2.2 屏幕墙列表：

img.png

当屏幕墙的数量大于1个，且拥有屏幕切换权限时，以列表的形式展示当前系统下所有的屏幕墙，点击其中一个，可切换到对应的屏幕墙上，显示相对应的屏幕窗口预览和场景列表。

# 2.3 屏幕墙列表分页：

当屏幕墙数量大于3个时，显示分页，点击后，如果拥有屏幕切换权限，将切换到下一个屏幕墙上。

# 3. 屏幕预览

# 3.1 页面位置：

进入首页 -> 页面正中间 img.png

# 3.2 工具栏：

# 3.2.1 包括5个工具依次为：

  1. 物理设备区域
  2. 是否开启虚拟槽位
  3. 窗口磁吸
  4. 窗口是否锁定
  5. 清除当前场景的所有窗口 img.png

TIP

以上所有工具，能在【页面配置】里的工具栏设置里进行显示与隐藏的配置

# 3.3 屏幕预览区域：

img.png

# 3.3.1 屏幕预览区域主要是展示选择大屏展示的画面内容

  1. 大屏中展示的预览画面
  2. 大屏中展示了哪些信号
  3. 信号窗口在大屏上的位置信息

温馨提示

以上所有图层，通过工具【图层显示】切换显示

# 3.4 屏幕信号源窗口列表

img.png

# 3.4.1 信号源窗口上操作包括：

  1. 移动窗口位置：选择一个窗口，鼠标拖动后，改变窗口的位置，停止移动后，将窗口的信息保存到场景里。
  2. 改变窗口尺寸：选择一个窗口，再选择窗口的角或边，拖动鼠标，窗口的大小会发现变化。变化后窗口的信息保存到场景里。
  3. 窗口右键功能：置底、置底、删除、全屏、调整（弹出层，修改z,y,width,height）。
  4. 单个窗口双击：调整该窗口的大小，使它与鼠标点击处的槽位尺寸保持一致。
  5. 窗口更多操作（窗口右上角三点）：弹窗调整层，修改z,y,width,height。
  6. 窗口删除：当窗口拖出屏幕区域时，将会删除该窗口（或窗口右键-删除）。

温馨提示

平板模式下，长按窗口700毫秒后，显示窗口右键菜单

# 4. 场景

# 4.1 切换到场景列表

进入首页 -> 页面正下方 -> 点击场景列表 img.png

# 4.1 场景分组

  1. 点击更多按钮，新增场景分组提供场景分组功能 img.png
  2. 新增场景分组：点击新增按钮，输入分组名称，点击确认后，新增一个场景分组。
  3. 场景分组：点击分组名称，切换到对应的场景分组上，即可展示当前分组下的场景列表。 img.png

# 4.2 场景列表功能包括：

  1. 场景列表分页：场景的数量大于浏览器显示宽度时，或出现下一页，否则，提示：当前为最后一页。

  2. 场景搜索：输入关键字后，点击输入框后面的放大镜按钮，在所有场景中搜索场景名称包含关键字的场景。

  3. 场景新增：弹框，输入一个新的场景名称，点击确认后，新增一个新的场景，添加到场景列表最后。

  4. 场景项右键菜单：置顶、置底、重命名、删除。

    置顶：该场景排序放在最前面。

    置底：该场景排序放在最后面。

    重命名：修改该场景的名称。

    删除：二次弹框确认后，删除该场景。

  5. 场景更多操作：与场景右键相同的操作：置顶、置底、重命名、删除。

  6. 场景切换：点击其中一个场景，屏幕预览区域的槽位和窗口将会被更新。

温馨提示

场景列表：可以通过【页面配置】功能的页面布局，将场景的显示位置修改成页面居右浮动显示，功能与此一致。

# 5. 信号源列表

img.png

# 5.1 页面位置：

进入首页 -> 页面正下方。

# 5.2 信号源列表功能包括：

  1. 信号源列表分页：信号源的数量大于浏览器显示宽度时，或出现下一页，否则，提示：当前为最后一页。
  2. 信号源搜索：输入关键字后，点击输入框后面的放大镜按钮，在所有信号源中搜索信号源名称包含关键字的信号源。
  3. 信号源重命名：点击信号源的名称，输入新名称，当光标离开时，保存新的名称，同时刷新信号源列表和窗口。
  4. 信号源分组：在信号源列表上面有分组的tags,点击后，切换到对应的分组上，并显示该分组内的信号源列表。
  5. 信号源右键菜单：加入分组，新建并加入分组。
  6. 加入分组：点击后弹窗，显示所有的分组列表，勾选确认后，能将该信号源加入分组，如果取消勾选，则将该信号源从分组中移除。分组列表支持分组的编辑删除和新增。
  7. 新建并加入分组：一种快速加入新分组的方法，点击后，弹窗，输入新的分组名，确认后，增加一个新的分组并将信号源加入该分组。
  8. 信号源在线状态展示：绿色在线、灰色离线 img.png
  9. 更多按钮：信号源分组管理、信号源配置、信号源音频配置
    • 信号源分组管理，点击后，弹窗，显示所有的分组列表，勾选确认后，能将该信号源加入分组，如果取消勾选，则将该信号源从分组中移除。分组列表支持分组的编辑删除和新增。
    • 信号源配置，配置信号的名称、信号类型、ip、端口号
    • 信号源音频配置，配置信号的音频输入输出、绑定到信号源、声音模式等配置 img.png

# 6. 屏幕墙配置

# 6.1 预览图：

img.png

# 6.2 访问路径:

{protocol}: //{host}:{port}/#/splicerConfig

# 6.3 打开方式：

通过点击右上角的配置图标 -> 打开设置 -> 点击【屏幕墙配置】 -> 进入页面。

# 6.4 屏幕墙配置页面功能有：

  1. 当前屏幕墙列表
  2. 使屏幕墙生效：打开屏幕墙开启按钮，生效后，屏幕墙列表中展示屏幕墙
  3. 修改屏幕墙名称
  4. 水平列数设置
  5. 水平间隔设置
  6. 垂直行数设置
  7. 垂直间隔设置
  8. 大屏宽度设置
  9. 大屏高度设置
  10. 是否是LED屏设置 img.png

# 7. 页面配置

img.png

# 7.1 打开方式：

通过点击右上角的配置图标 -> 打开设置 -> 点击【页面配置】 -> 打开弹窗。

# 7.2 页面设置

  1. 页面Header和logo：显示或隐藏页面上的header和logo，目的：再通用中控系统中作为内嵌页面时，如果有公用的header就可以隐藏系统的header。
  2. 背景是否展示，内嵌iframe网页时展示项目背景
  3. 锁屏工具是否显示，锁屏功能是否展示
  4. 强制同步工具是否显示，是否在主页面中展示强制同步工具，同步系统软硬件数据功能
  5. 强制页面刷新是否展示
  6. 配置工具是否展示 img.png

# 7.3 页面配置弹窗的可配置项有

  1. 开启槽位工具，用于是否开启逻辑槽位
  2. 槽位图层切换工具，用于切换槽位的图层
  3. 槽位编辑工具，用于编辑当前场景的槽位布局
  4. 窗口自适应工具，用于窗口拖动后自适应附近的槽位
  5. 窗口锁定工具，用于窗口是否能拖动
  6. 清除所有窗口工具是否显示
  7. 缩放比例工具，用于屏幕缩放给用户提供合适的显示比例 img.png

# 7.4 屏幕墙设置

  1. 屏幕墙列表是否展示，用于是否向用户展示屏幕墙列表
  2. 屏幕墙列表数量展示，用于是否向用户展示屏幕墙列表的数量
  3. 屏幕墙列表显示位置，用于设置屏幕墙列表的显示位置，居中、居左、居右 img.png

# 7.5 信号源设置

  1. 信号源列表是否展示，用于是否向用户展示信号源列表
  2. 信号源显示行数，用于设置信号源列表的显示行数
  3. 信号源显示的宽度设置
  4. 信号源显示高度设置
  5. 回显模式1画面图片刷新时间周期
  6. 回显迷失2，4画面图片刷新时间周期
  7. 信号源搜索是否展示
  8. 信号源列表搜索是否开启 img.png

# 7.6 场景设置

  1. 场景变动是否自动保存
  2. 工具栏处的当前场景是否展示
  3. 信号源处的场景列表，用于是否向用户展示信号源列表和场景列表
  4. 上下场景切换是否展示
  5. 当前场景的历史记录，是否显示历史场景数据，用于恢复场景
  6. 场景设置是否展示

# 7.7 服务设置

  1. 主备切换，用于开启主备同步功能
  2. websocket服务地址，用于设置websocket服务地址

img.png

# 8. 场景逻辑槽位编辑

# 8.1 打开方式

屏幕预览区 -> 开启逻辑槽位按钮 img.png

# 8.2 逻辑槽位快捷编辑

  1. 整个屏幕，将屏幕变成一个整体区域
  2. 水平等分，将屏幕水平等分成2等分
  3. 垂直等分，将屏幕垂直等分成2等分
  4. 水平3等分，将屏幕水平等分成3等分
  5. 垂直3等分，将屏幕垂直等分成3等分
  6. 四等分，将屏幕分成2x2等分
  7. 垂直4等分，将屏幕垂直等分成4等分
  8. 9等分，将屏幕等分成3x3等份
  9. 水平6等分，将屏幕水平等分成6等分
  10. 垂直6等分，将屏幕垂直等分成6等分
  11. 按窗口分割，将屏幕按照当前的窗口进行智能分割
  12. 编辑与合并，自定义将屏幕墙按照任意规则进行分割

# 9. 项目部署与配置

# 9.1 部署在hulk服务中：

hulk服务部署后，默认会携带拼接器控制系统。拼接器控制系统的配置也是默认设置好了，无需修改。

温馨提示

【推荐使用】只需开启并配置hulk服务，无需修改拼接器控制系统的配置

# 9.1 使用拼接器插件方式部署到项目中（推荐使用方式）

  1. 进入CyberHub项目，点击项目设置 -> 插件管理 -> 点击拼接器插件 -> 点击安装 img.png img.png
  2. 进入项目中，拖拽一个拼接器插件页面到项目中 img.png
  3. 注意如果服务不展示数据，请在拼接器插件中设置服务地址、WebSocket端口号 img.png

# 9.2 CyberHub使用hulk服务网页内嵌模式：

通用中控的编辑模式下，使用页面容器组件，设置页面容器组件的页面地址为hulk服务的地址，此时，拼接器控制系统的配置，无需修改。

img.png

温馨提示

【推荐使用】只需开启并配置hulk服务，无需修改拼接器控制系统的配置 为适配项目，需要在设置中影藏背景颜色、隐藏头部、隐藏logo使项目展示项目的背景图

API文档 →