HOS门户引擎

# 门户组件开发文档

# 缓存区的使用

HOS门户提供公共的缓存区,供集成的各个应用系统进行数据交互。

注意：

1.HOS门户缓存只有当前登录，当前岗位有效。
2.切换用户或者切换岗位，缓存清空。

# 缓存key值定义规范

缓存定义统一按照[系统编码+_+key值]的方式定义,如oa系统可以如下定义:

oa_processId    流程id

# 使用方法

# 使用场景一：

通过HOS门户打开自己的系统时，可根据需求存取数据。

门户会将sessionKey拼接在url上，可解析url保存sessionKey，在保存、获取、清空缓存区数据时使用

# 使用方法

# 1.保存门户缓存区数据
接口类型:rest
方法类型:get
接口url:门户前端ip+ /api/openApi/hos-portalve-cache-data
如:http://localhost:8004/api/openApi/hos-portal/save-cache-data
入参:String sessionKey, String param
param为缓存参数字符串拼装而成,支持同时存储多个键值对,格式为:key1_value1,key2_value2,key3_value3
# 2.获取门户缓存区数据
接口类型:rest
方法类型:get
接口url:门户前端ip+ /api/openApi/hos-portal/get-cache-data
    如:http://localhost:8004/api/openApi/hos-portal/get-cache-data
入参:String sessionKey, String paramKey
    paramKey为接口1存储的key值
返回值示例:
{
    "code": "200",
    "msg": "操作成功",
    "data": "aaa",
    "success": true
}
# 3.清空业务缓存数据
接口类型:rest
方法类型:get
接口url:门户前端ip+ /api/openApi/hos-portal/clean-cache-data
    如:http://localhost:8004/api/openApi/hos-portal/clean-cache-data
入参:String sessionKey

# 使用场景二：

接口中使用缓存区数据，例：柱状图获取数据时使用缓存区内容
菜单路径【系统设置-系统管理-接口管理-接口配置】

工作站设计

编辑接口，请求参数 - 请求头，参数类型选择缓存区，将参数字段和参数值设置为需要获取的对应缓存区参数即可

工作站设计

# 切换用户或退出的对接

# 切换用户

门户退出或切换用户时,会发送消息 portal_clearToken.各个应用系统需要监听接收此消息.收到此消息时进行清除登录态信息.

例如:

   window.addEventListener('message', (e)=>{
         if(e.data == 'portal_clearToken') {
           // 清除登录态 
           clearAll();
         }
   });

# 内嵌组件开发规则

当业务较复杂时刻选用嵌入组件，既可以嵌入类似portal配置出的页面，也可嵌入产线自己开发的页面。目前系统支持iframe嵌入方式，填写链接地址，配置组件参数，选择参数类型，填写参数编码和参数值。保存后，可在设计器中添加。当设计器中添加内嵌组件时，页面直接展示链接中的内容。

内嵌组件

内嵌组件

# 内嵌组件开发规则

1、为适应宽度和高度自适应，对样式做出以下规则：
    height：100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(17px);
    border-radius: 5px 5px 5px 5px; /* 根据组件需求设置是否需要圆角 */

2、内嵌组件需打开HOS窗口时：
    将打开的弹出页面单独形成路由，将路由地址，通过postMessage就行传递。
    list = {id: '窗口id',name:'窗口名称',link:'路由地址'};
    window.parent.postMessage( {embedWindow: list}, "*");
    各属性解释：
        id： 窗口id，为32位uuid不可重复。未避免每次点击按钮都新打开一个窗口，故每个窗口都需要一个唯一标识。
        name： 窗口标题的名称
        link：打开的路由地址
        width：窗口宽度
        height：窗口高度
        maximum：是否全屏
        *宽度和高度为非必要值，不设置宽度和高度时，使用默认宽高
    例：
    var list = {id: '4e11f806aa17cb31b188e7df3dc9a87e', name:'窗口一',link:'https://sunpma.com/other/rgb/'};
    window.parent.postMessage( {embedWindow: list}, "*");

若产品组嵌入的页面为多层iframe嵌套，相对应的parent也应为多级，如图第一层为通过HOS门户引擎内嵌组件嵌入的iframe链接，第二层为内部链接，请使用：window.parent.parent.postMessage( {embedWindow: list}, "*"); 打开窗口

产品组测试打开窗口

产品组内嵌组件打开HOS窗口测试结果：

产品组测试打开窗口

产品组测试打开窗口

# 刷新组件

当我们打开窗口作业时，有时操作完成时需要刷新门户里的组件。通过postMessage传递消息刷新组件。 componentCode（组件的编码）从链接地址参数中获取，此参数用于门户刷新指定的组件。

例：


<html>
<header>
</header>
<body>
<button onclick="sendMsg()">点击我刷新组件关闭弹框</button>

<script>
    var windowId = '';
    var componentCode = '';
    window.onload = function(){
        // 从地址参数中获取windowId
        windowId = GetQueryString("windowId");
        
        //从地址参数中获取组件编码
        componentCode = GetQueryString("componentCode");
    }
    function GetQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    function sendMsg(){
        // 刷新组件
        window.parent.postMessage({refreshComponent: {componentCode:componentCode}},"*")
        // 关闭弹窗
        window.parent.postMessage(
                { operatePortalWindow:
                            {
                                windowId: windowId,
                                operate: 'windowClose'
                            }
                },"*");
    }
</script>
</body>
</html>

← 问题列表 →