关于前端:DGIOT基本功能介绍组态编辑配置

组态编辑配置流程图

[小 迪 导读] : 组态编辑丰盛具象化了产品设施:

1. 背景底图配置

用户通过设施云 - 产品治理 - 组态 进入组态配置界面

首先抉择背景底图进行背景的配置 - 该配置可抉择本地的图片或者零碎自带的背景图片，随后进行保留。

2. 实时数据结点与管制下发结点的创立

依据该产品的须要，创立指定数量的实时数据结点与管制下发结点, 保留。

3. 实时数据绑定

双击实时数据结点，进行物模型数据的绑定（须要对上一步结点进行保留当前再进行物模型的绑定）

[小迪 揭示]：

• 可在设施治理中设施的操作中的实时数据进行查看

4. 管制下发的绑定

首先，依据本人的需要在产品详情 - 可视化中配置本人所须要的管制下发的 amis 表单

MQTT 的配置同步下发管制点击参考

管制下发默认模板(需自行批改配置)

{
  "type": "page",
  "body": [
    {
      "api": {
        "url": "iotapi/classes/Device/parse_objectid",
        "method": "put",
        "headers": {
          "store": "localStorage",
          "dgiotReplace": "parse_objectid"
        },
        "dataType": "json",
        "requestAdaptor": "return {\r\n    ...api,\r\n    data: {\r\n        profile:{ ...api.data}\r\n    }\r\n}"
      },
      "body": [
        {
          "name": "name",
          "type": "input-text",
          "label": "设施名称"
        }
      ],
      "type": "form"
    }
  ],
  "initApi": {
    "url": "iotapi/classes/Device/parse_objectid",
    "method": "get",
    "adaptor": "return {\r\n  \"status\":0,\r\n  \"msg\":\"\",\r\n  \"data\":response.data.profile\r\n}",
    "headers": {
      "store": "localStorage",
      "dgiotReplace": "parse_objectid"
    },
    "dataType": "json"
  },
  "messages": {},
  "style": {}}

创立好 profile 管制下发模板当前，双击管制下发结点进行绑定，随后保留

[小迪 揭示]：

• 也能够不需绑定管制下发，可在设施治理中设施的操作中的管制进行查看

5. 动态文本框的应用

抉择动态文本框结点进行创立，依据本人的需要创立指定数量的动态文本框，保留

6. 结点款式的批改（动态文本框，管制下发，实时数据）

抉择单击对应的结点，在右侧弹出抽屉中进行根本款式的批改编辑，
编辑实现后进行保留。

7. 动静图片的应用

要求：
1. 例子：精灵图

2. 点位坐标以及图片宽高
// x, y, width, height (4 frames)
（x: 横坐标，y: 纵坐标，width: 图片宽度，height: 图片高度）
2, 2, 70, 119,
71, 2, 74, 119,
146, 2, 81, 119,
226, 2, 76, 119,
应用阐明：
1. 抉择须要的动图素材
2. 单击图片进行大小设置
3. 挪动地位
4. 保留

[小迪 揭示]：

• 素材库中现只有水泵素材

[小 迪 点评]

• dgiot 组态编辑可依据本人理论的利用场景搭建出一个模仿现场进行一个实时的监控。

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