玄道智控平台

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

# 引用名称说明：

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

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

port：为访问端口,例如：9090

config.js：为部署文件/static/config.js文件

# 1. 用户登录

# 1.1 访问路径:

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

# 1.2 界面预览：

img.png

# 1.3 功能说明：

  1. {config.js}中hasLogin字段为true时，系统会检查cookie中的token,如不存在，或调用API时返回401时，会自动跳转至登录界面。hasLogin字段为false时,可直接进入首页。
  2. 输入密码，点击【登录】，将以admin的身份登录系统。密码的输入规则为：必须包含一个大写、小写字母、数字、特殊符号，8-32个字符。
  3. 查看输入的密码：输入密码后，点击输入框后面的眼睛，将密文转换明文。
  4. 点击【修改密码】连接，进入修改密码页面。

# 2 修改密码

# 2.1 访问路径:

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

# 2.2 界面预览：

img.png

# 2.3 功能说明：

  1. 输入旧密码，新密码，确认新密码，点击【修改】，密码将被修改。密码的输入规则为：必须包含一个大写、小写字母、数字、特殊符号，8-32个字符。
  2. 查看输入的密码：输入密码后，点击输入框后面的眼睛，旧密码，新密码，确认新密码将密文转换明文。
  3. 点击修改【返回】连接，进入登录页面。

# 3. 拼接器首页布局

# 3.1 访问路径:

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

# 3.2 界面预览：

img.png

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

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

# 4. 屏幕墙切换

# 4.1 页面位置：

进入首页 -> 页面正上方

# 4.2 屏幕墙列表：

img.png

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

# 4.3 屏幕墙列表分页：

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

# 5. 屏幕预览

# 5.1 页面位置：

进入首页 -> 页面正中间

# 5.2 工具栏：

img.png

# 5.2.1 包括9个工具依次为：

  1. 锁屏工具：锁定全屏，屏幕上无法做任何操作。
  2. 虚拟槽位开关：在屏幕墙的当前场景中，开启或关闭虚拟槽位。
  3. 图层显示：切换显示：物理槽位，LED槽位，虚拟槽位。
  4. 虚拟槽位编辑：修改当前场景的虚拟槽位布局（详细请看）。
  5. 磁吸工具：移动窗口或改变窗口尺寸大小时，是否自动铺满所在的槽位。
  6. 锁定窗口：屏幕上的信号源窗口是否能被移动。此工具的显示还受窗口移动权限的控制。
  7. 清屏功能：清除当前场景上的所有信号源窗口。此工具的显示还受窗口删除权限的控制。
  8. 强制同步：强制与硬件进行一次同步，并刷新当前场景上的所有数据。
  9. 屏幕预览缩放：修改屏幕预览的缩放比例。

TIP

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

# 5.3 屏幕预览区域：

img.png

# 5.3.1 屏幕预览区域包括3个图层：

  1. 物理槽位（淡白色层，实际的物理显示器）
  2. LED槽位（淡紫色层，物理显示器拼接后，排除偏移后，实际显示画面的区域）
  3. 虚拟槽位（淡黄色层，通过拼接器软件，划分的槽位区域）

温馨提示

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

# 5.4 屏幕信号源窗口列表

img.png

# 5.4.1 信号源窗口上操作有：

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

温馨提示

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

# 6. 场景切换

img.png

# 6.1 页面位置：

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

# 6.2 场景列表功能包括：

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

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

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

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

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

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

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

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

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

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

温馨提示

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

# 7. 信号源列表

img.png

# 7.1 页面位置：

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

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

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

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

# 8. 屏幕墙配置

# 8.1 预览图：

img.png

# 8.2 访问路径:

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

# 8.3 打开方式：

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

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

  1. 当前屏幕墙列表
  2. 删除屏幕墙：二次确认后，删除当前选择的屏幕墙
  3. 查看屏幕墙基础信息和槽位信息：右侧展示屏幕的名称，刷新率，分辨率等信息，并展示该屏幕墙的槽位信息。可在物理槽位和虚拟槽位之间切换显示。
  4. 编辑屏幕墙基础信息和槽位信息：修改屏幕名称，水平、垂直数量，分辨率，LED的偏移和尺寸，和绑定的端口，点击【确定】后，修改该屏幕墙。
  5. 新增屏幕墙：添加屏幕名称，水平、垂直数量，分辨率，LED的偏移和尺寸，然后绑定端口，点击【确定】后，新增一个屏幕墙。
  6. 退出：返回首页

# 9. 页面配置

img.png

# 9.1 打开方式：

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

# 9.2 页面配置弹窗的可配置项有：

  1. 页面Header和logo：显示或隐藏页面上的header和logo，目的：再通用中控系统中作为内嵌页面时，如果有公用的header就可以隐藏系统的header。
  2. 主备同步：开启或关闭主备同步功能，多台电脑同时操作同一个拼接服务时，多台电脑之间保持一致。
  3. 场景右键菜单：开启或关闭场景列表的右键功能。
  4. 锁屏功能：锁屏工具是否显示。
  5. 场景启动虚拟槽：虚拟槽切换工具是否显示,如果关闭虚拟槽时，将使用LED槽位。
  6. 切换槽位显示图层：切换槽位显示图层工具是否显示。
  7. 场景编辑槽位：场景编辑槽位工具是否显示。
  8. 窗口自适应槽位(磁吸)：磁吸工具是否显示，同时受限于窗口是否能改变的权限，
  9. 窗口锁定(是否能拖动)：窗口锁定工具是否显示，同时受限于窗口是否能改变的权限。
  10. 清除所有窗口：清除所有窗口工具是否显示。
  11. 强制硬件同步：强制硬件同步工具是否显示。
  12. 信号(场景)行数：设置信号或场景显示的行数，最小1行，最大4行。
  13. 信号预览图缩小：信号预览图缩小，开启后显示行数翻倍，信号源较多时使用。
  14. 信号预览图更新周期：信号源和窗口的回显画面的刷新频率，填写单位为毫秒，最小可填50毫秒，最大可填3600000毫秒(1小时)。
  15. 场景布局：场景显示在底部还是浮动在右侧。

# 10. 信号源音频

img.png

# 10.1 打开方式：

通过点击右上角的配置图标 -> 打开菜单 -> 点击【信号源音频】 -> 打开弹窗。

# 10.2 信号源音频弹窗里面有四个Tab，功能有：

  1. 音频设置：设置音频矩阵和音频是几进几出。
  2. 音频绑定：信号源绑定音频
  3. 音频输出设置：设置音频的输入口和输出口
  4. 场景声音模式：设置场景有声或无声

# 11. 槽位编辑

img.png

# 11.1 打开方式

屏幕预览区 -> 工具栏 -> 槽位编辑图标 -> 页面顶部出现槽位编辑的工具栏，屏幕预览区只显示槽位。

# 11.2 槽位编辑的功能有：

  1. X轴切割：点击X轴切割，移动鼠标到槽位上的某一点后，点击即可将该槽位按X轴方向一分为二(此时，按下Shift键，可切换至Y轴切割)。
  2. Y轴切割：点击Y轴切割，移动鼠标到槽位上的某一点后，点击即可将该槽位按Y轴方向一分为二(此时，按下Shift键，可切换至X轴切割)。
  3. 等分切割：选择一个槽位，再点击等分切割,弹窗，填写行和列，确认后，将所选槽位等比分割成指定行，指定列。
  4. 矩形切割层：点击矩形切割层，槽位预览区出现黄色矩形，移动矩形至合适地方或拖动矩形边框至合适的大小，点击或双击该矩形，将槽位切割出一个与该矩形相同大小的槽位区域。
  5. 窗口镜像切割层：点击窗口镜像切割层，槽位预览区出现多个与当前窗口大小相同的切割层，点击任意层，将槽位切割为窗口大小的槽位。
  6. 合并槽位：将两个相邻的并且相邻边相等的槽位合并成一个槽位。
  7. 槽位改变大小：选择槽位预览区中的一个槽位，出现四边可拖动状态，如果相邻的槽位边相同，则能改变槽位的大小。（键盘上下左右可进行微调）

# 12. 项目部署与配置

# 12.1 部署在hulk服务中：

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

温馨提示

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

# 12.2 通用中控使用hulk服务：

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

img.png

温馨提示

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

# 12.3 通用中控拼接器控制系统：

通用中控的编辑模式下，使用页面容器组件，设置页面容器组件的页面地址为：/ccs-common/#/，此时，需要修改拼接器控制系统配置文件{config.js}。

{config.js}文件路径为：\ccs_pro-v2.0.1\www\ccs-common\config.js

此时，需修改{config.js}文件的【CCS_SERVER_PROTOCOL】【CCS_SERVER_HOST】【CCS_SERVER_PORT】，写入真实的协议（hulk服务开启的HTTP协议）、主机（hulk服务的ip）、端口（hulk服务的端口）。

该文件的配置项说明：

/* eslint-disable */
const config = {
  //请求数据的协议，例如：https
  CCS_SERVER_PROTOCOL: '',
  //请求数据的IP，例如：127.0.0.1
  CCS_SERVER_HOST: '',
  //请求数据的端口,例如：9090
  CCS_SERVER_PORT: '',
  //多台设备同步时，websocket服务的端口,例如：8000
  CCS_WEBSOCKET_PORT: '8000',
  //页面：是否开启主备同步功能，此项true，并且CCS_WEBSOCKET_PORT有值时，主备同步功能才能开启
  hasMainBack: true,
  //页面：是否开启用户登录,
  hasLogin: false,
  //页面：是否有页面头部内容
  hasHeader: true,
  //工具栏：开启或关闭虚拟槽
  hasSlotOn: true,
  //工具栏：是否有屏幕锁定功能
  hasLock: true,
  //工具栏：是否能编辑槽位
  hasSlotEdit: true,
  //工具栏：槽位图层显示
  hasSlotLayoutShow: true,
  //工具栏：是否能切换槽位
  hasSlotSwitch: false,
  //工具栏：窗口自适应槽位大小（磁吸功能）
  hasWinAutoSize: true,
  //工具栏：窗口是否可拖动切换
  hasWinDrag: true,
  //工具栏：清除所有窗口
  hasClearAll: true,
  //工具栏：强制硬件同步
  hasAsync: true,
  //信号源：设定行数
  hasSignalLineNum: 1,
  //信号源：显示较小的缩略图
  signalMinSize: false,
  //场景：是否有右键菜单
  hasScenesRightMenu: true,
  //场景：布局，lr:左右,tb:上下布局
  layoutStatus: 'tb',
  //信号源：预览图刷新周期，单位：毫秒
  imgRC: 10000
}

API文档 →