# 工作站设计

根据岗位需要创建工作站,并设计基本属性。

工作站列表

【菜单路径:】系统设置–>工作站管理–>工作站设计

工作站列表

# 查询工作站

可根据编码、名称模糊查询;

模板新增

# 新增工作站

新增工作站,填写工作站基本信息

新增工作站

属性名        属性说明
编码 必填项。最大长度为30
名称 必填项。最大长度为30
发布版本 当前工作站发布的版本,工作站只有发布的版本才能进行授权和显示
是否开启 开启时可供用户对工作站进行授权,控制是否在首页显示。

# 编辑工作站

点击右侧编辑按钮,弹出编辑模板弹框,可修改工作站的基本信息。

新增工作站

# 删除工作站

工作站删除分为两种操作场景:单独删除和批量删除。

# 单独删除

点击工作站列表行操作列的删除按钮,即可对工作站进行删除。

删除组件

# 批量删除

勾选要删除的数据,点击列表上方的删除按钮,即可对工作站进行批量删除。

删除组件

# 工作站设计

根据岗位需要,选择HOS门户引擎提供的组件,设计工作站页面,并选择对应的版本保存。
工作站设计页面主要负责页面组件的位置摆放及组件夹大小、名称的设置。
工作站列表展示工作站的基本信息,包括:编码、名称、是否启用等。

工作站设计:列表操作列,第二个操作按钮为工作站页面设计入口

页面设计按钮

设计页面1:1还原首页展示,设计页面主要包括:组件名称及版本选择区、操作按钮区、组件设计区、多屏展示区、添加组件区

工作站设计

# 组件名称及版本选择区

版本选择

1、展示组件标题

2、版本:进入设计页面默认加载已发布版本

3、点击下拉选择框显示工作站所有的版本

4、已发布的版本会有标识

5、点击选择版本会加载对应版本的工作站页面

6、如果未发布的版本想要授权和显示,需要去工作站编辑页面,选择对应的版本并保存,才能进行授权和发布

# 操作按钮区(从左往右依次为)

工作站设计

# 1、预览

关闭所有可设置项,完全展现首页效果

# 2、保存

保存当前设计页,返回工作站列表

# 3、取消

关闭设计页面返回,返回工作站列表

# 4、开启/关闭垂直居中

针对设计区域,操作是否启用垂直居中效果

# 5、选择模板

打开选择模板弹窗,展示系统中可用的所有模板供用户选择,可根据名称进行搜索。选中某一个模板时,该模板右上角展示选中标识,确定使用模板时,将用模板数据替换原有工作站数据。

模板设计

模板设计

模板管理配置,请见:模板管理

# 6、保存新版本

将当前设计页面保存为新的版本,并刷新左上角版本列表,保存成功后可在编辑工作站是选择合适的版本并发布

# 添加组件区

工作站设计

添加组件分为:选择组件 和 集成组件,选择组件中目前包括:富文本组件,可点击直接添加中画布中进行设计;集成组件中包括:添加组件,点击添加组件打开弹窗,弹窗中的列表中包含所有组件注册列表中开启的组件和内置系统组件。

添加富文本
添加一个富文本组件,可自定义文字样式,可自由上传图标,并设置其大小,位置

富文本组件

富文本编辑器

富文本编辑器

工作站选择的模板中如有富文本组件,编辑文字时请先输入文字内容再删除原有内容,否则样式会丢失。

富文本组件可根据当前环境语种提供多个页签,可在页面中输入不同的语言信息,系统将自动匹配当前语言进行展示。

添加组件

页面左侧为应用系统菜单,可根据应用系统查看组件信息。
组件列表操作列,开关标识不可复用组件,计数器标识可复用组件。列表中不包含页面已保存的不可复用组件,计数器记录页面中已存在的可复用组件数量。

工作站设计

# 多屏展示区

工作站设计

工作站页面为轮播效果,设计页面中,切换轮播的按钮在设计区域的上方,以按钮形式展示,一个按钮为一个屏,第一个按钮为主屏。
最后一个按钮为添加副屏,增加后设计区域立即切换到当前添加的副屏中。
可直接拖动按钮对副屏进行排序(主屏不可拖动)。
非主屏后的删除按钮可对屏进行删除操作。

# 组件设计区

工作站设计

提供编辑、预览页面,在设计区可拖动摆放组件,并与首页进行1比1展示,可以更好的看到首页的效果。区域内上下左右存在15px的间距。

* 设计页面仅做展示效果,点击组件不会跳转

# 页面设计

页面设计的目标是为了更好还原设计图效果,但不是百分百还原。
就目前设计器模块宽高的问题,跟UI进行过沟通,允许存在一定px值偏差。

组件夹可根据需求在右下角区域拖动改变大小,其他区域改变大组件夹位置,也可直接拖动组件改变组件位置,可设计的组件类型分为:

组件中右上角的操作按钮(从左往右依次为):

小组件夹弹框

上图中第一行第四个组件夹右上角操作按钮,从左往右依次代表:
1、是否静态(仅在模板管理显示):组件右下角显示拖动小图标时,当前组件为非静态状态,可在工作站中使用模板后,对该组件进行改变大小位置等操作,为静态状态时,在工作站使用模板后,不可对该组件进行改变大小位置等操作

2、删除按钮:删除组件

*3、手动设置模块大小

手动设置模块大小

1、宽度设置:单位:px。输入值需大于100,小于当前分辨率下内容区域可使用宽度。例如:分辨率为1920:100 < 宽度值 < 1600(需减去左右各15px的间距);分辨率为3440:100 < 宽度值 <br 2800(需减去左右各15px的间距);

手动设置模块大小

2、高度设置:单位:px。输入值需大于0,小于当前分辨率下内容区域高度。

*设计区域为栅格布局,当前版本每行分为400列。根据选用的vue-grid-layout可拖动组件要求,输入的宽度值需根据最小单位转换为比例,且该比例必须为整数,vue-grid-layout组件再根据比例和每行模块数(模块与模块间距为15px)进行自动计算宽度,所以实际组件的大小与设置值之间会存在一定偏差。

*如介意偏差,可使用拖动功能设置模块大小

操作提示:设计器既支持拖动进行模块大小设置,也可输入设置宽高值。手动设置宽高功能主要目的是为了使同类型模块宽度一致,宽度值与实际PX值存在一定偏差,就此设计器设置宽度偏差问题跟UI进行过沟通,允许存在一定的偏差。可将宽度值视为一种度量单位,查看同类型模块宽度是否一致,达到更好还原设计图的效果

# 富文本组件动态参数替换

请见:富文本组件动态参数替换