DGIOT低代码大屏实时渲染技术架构

johnliu

2023年9月11日 / 博客, 实战教程, 技术文章

[小 迪 导读]：
艾瑞咨询数据显示，2021年，中国低代码行业市场规模达到27.5亿元，增速为72.4%，其预计未来4年行业复合增速将达到44.1%，到2025年，中国低代码行业的市场规模将达到118.4亿元。
在Gartner的预测中，到2025年，全球将有70%的新应用将由低代码/无代码技术完成开发。

dgiot开源物联网平台通过整合百度AMIS和老牌的konva工业组态大屏等低代码技术组件，面向数字车间，工业园区，智慧农业等提供低代码大屏实时渲染的技术架构，可以帮忙企业快速落地数字化转型。

技术架构

dgiot通过整合konva，amis等技术构建了konva editor和amis editor提供快速的低代码界面和大屏的设计开发环境，同时无缝对接了konva和amis渲染器，可以与dgiot物联网平台实现数据实时联动。

基于上面的技术架构，一般的工程师通过简单的三个步骤就可以快速自己设计大屏组态控件，并且关联物联设备，实现大屏组件的动态加载和设备数据的实时投射到amis控件中。

1. amis控件设计

通过amis editor可以快速设计各类大屏组态控件

通过视图管理控件上传对应的ico控件，必须上传图片，否则在konva editor的左边栏看不到刚才自己设计的amis大屏组态控件。

2. 组态大屏布局

通过第一步简单的拖拉撰就可以快速在konva editor上设计出一个自己的大屏组态控件，然后再这个控件上点击鼠标就可以关联设备数据源。

3. amis控件渲染

• mqtt推送amis模板和初始数据

• 通过websocket实时推送数据

  {{screen_productid}} 和 {{screen_deviceid}} 为konva传递给amis的产品id和设备id
  
  下面是 websocket推送实时数据的参考代码

  {
    "type": "service",
    "body": [
      {
        "label": "名称",
        "name": "name",
        "type": "static",
        "id": "u:d7889d83df2d"
      }
    ],
    "regions": [
      "body"
    ],
    "ws": {
      "data": {
        "name": "${name}"
      },
      "url": "ws://127.0.0.1:8777/websocket?deviceid={{screen_deviceid}} &name=${name}"
    },
    "id": "u:bda7f1385acb"
  }

  4. amis大屏整体效果

  大屏上面可以通amis快速构建视频，echart，动态表单，二维码，动态日志等所有amis支持的大屏组态控件，极大的降低了大屏组态控件开发门槛。时间匆促，没有细心布局，大家可以把amis的css和大屏做一个精心布局，会有更好的呈现效果?

[小 迪 点评]

• 降低了低代码开发设计门槛，简单三步完成大屏控件设计
• 提高了设备数据投射实时性，简单点击数据就关联数据源
• 拓展了AICG演化技术新路径，可以通过DSL的实现DOM的逆向运算

想了解更多 dgiot 的具体细节，欢迎大家在GitHub上查看相关源代码。