分享
查看: 1439|回复: 0

[分享] ThingJS-X窗口通信二次开发解决方案

[复制链接]

ThingJS-X窗口通信二次开发解决方案

发表于 2023-8-28 11:30:33 来自 分享 阅读模式 倒序浏览
zzv_icon1439 zzr_icon0 查看全部
本帖最后由 zhaojinguo 于 2023-8-28 11:34 编辑

ThingJS-X系统(子页面)初始化消息监听脚本
打开后台管理系统 -> 配置管理 -> 高级配置 -> 操作集:添加一个新的操作集:
ThingJS-X窗口通信二次开发解决方案
然后配置操作原子,从右侧面板种的高级相关拖入一个“执行JavaScript脚本”:
ThingJS-X窗口通信二次开发解决方案
如果有多个交互功能,建议定义多个”执行JavaScript脚本“

接下来就是配置脚本内容了:
ThingJS-X窗口通信二次开发解决方案
详细的脚本代码如下:
第 1 种方法:使用 API 直接更改建筑颜色:
  1. window.addEventListener('message', (e) => {
  2.   if (e.data.type === '改变建筑颜色') {
  3.     // “小蛮腰”是建筑 id,也就是孪生体管理中孪生体数据的编号
  4.     const building = THING.App.current.query('#小蛮腰')[0];
  5.     THINGX.utils.setObjColor(building, '#ff0000');
  6.   }
  7. });
复制代码
第 2 种方法:假设你已经有配置图层或者操作集可以更改建筑的颜色,那么激活图层或执行操作集即可
执行操作集:
  1. window.addEventListener('message', (e) => {
  2.   // 执行某个操作集
  3.   THINGX.actionManager.run('改变xxx建筑的颜色');
  4. });
复制代码
激活图层:
  1. window.addEventListener('message', (e) => {
  2.   // 执行某个操作集
  3.   THINGX.actionManager.run('改变xxx建筑的颜色');
  4. });
复制代码
加载脚本代码
配好操作集之后,我们要加载这段脚本代码。
打开后台管理系统 -> 配置管理 -> 高级配置 -> 系统配置 -> 其他设置 -> 系统事件配置:
ThingJS-X窗口通信二次开发解决方案
在系统加载时,执行该操作集就行:
ThingJS-X窗口通信二次开发解决方案
业务系统(父页面)
通过窗口消息进行通信即可:
  1. // 获取 iframe 窗口
  2. const iframe = document.getElementById('ThingJS-X-IFRAME');
  3. // 组织消息体,发送消息
  4. iframe.contentWindow.postMessage(
  5.   {
  6.     type: '改变建筑颜色',
  7.   },
  8.   '*'
  9. );
复制代码



avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t