[]
        
在线Demo 免费试用
(Showing Draft Content)

通过物联网数据构建拓扑图应用

1.概述

1.1 功能概述

本节将通过实际案例演示如何基于物联网数据构建拓扑图及其应用实践。

1.2 实现效果

在仪表板中,通过物联网数据构建拓扑图可实现如下效果:

设备监控成品图

1.3 资源下载

  • 示例文件包: 下载后,您可直接导入至对应版本系统中查看使用。

    设备监控.zip

    type=info

    注意: 本示例压缩包基于8.1版本制作,请使用8.1及以上版本并参照导入与导出文档操作(低版本可能存在兼容性问题,建议升级)

2. 操作步骤

2.1 前提条件

  1. 下载资源后导入系统,编辑该仪表板引用的物联网数据,将服务器地址及主题改成您实际使用的,测试连接成功后保存;仪表板将会自动更新,显示实时数据。

2.2 可视化实现

接下来看怎样在仪表板中制作这样一个设备监控系统。

  • 该系统由3个空压机,4个流量计,及多个管道和阀门组成

  • 每个设备都有一个卡片显示该设备当前状态信息

2.2.1 空压机设计步骤

  1. 在左侧工具栏上选择 矩形 并拖到页面上。

  2. 设置圆角半径为5,设置边框颜色为蓝色。

  3. 绑定 1_空压机 的多个数据到矩形的数值上。

  4. 设置文本标签,显示文本, 内容中输入想要显示的文本,及插入绑定列表字段;改变水平对齐方式为左对齐,通过空格控制文本和列表字段对齐;改变垂直对齐方式为下对齐。

  5. 设置格式化,排气压力 小于或等于 0时,边框色显示红色。

  6. 再拖动一个矩形到该矩形内的上方。

    1. 绑定 1_空压机 的 机器编号和排气压力。

    2. 设置左上和右上圆角半径为5,设置边框颜色为蓝色及背景色为浅蓝色。

    3. 显示文本标签,且内容中插入{机器编号}。

    4. 设置格式化,排气压力小于或等于0时,背景色显示成浅红色,边框色显示成红色。

  7. 拖动一个svg形状到大矩形右侧,上传空压机的svg。

    compressor.svg

    未满足格式化条件时:

    image

    满足格式化条件时:

    image

    其他空压机可以复制设计好的空压机,重新绑定不同设备的数据

    type=info

    注意: 拓扑图重新绑定数据后,文本标签内容需重新插入列表字段,矩形才可正确显示数据,条件格式化也需要重新添加

2.2.2 流量计设计步骤

  1. 流量计设计步骤与空压机一致,请参考空压机设计步骤。

    image

    image

2.2.3 管道及阀门设计步骤

  1. 在左侧工具栏上选择 直线 拖到页面上。

  2. 绑定 1_空压机 的排气压力。

  3. 设置基础样式的颜色为浅蓝色,设置线宽为6。

  4. 设置动画效果为流动,设置时长为1,设置循环模式为循环,缓动函数为线性,设置颜色为深蓝色,设置线宽为5,虚线间隔为10。

  5. 设置条件格式化,排气压力小于或等于0 ,基础样式的颜色为浅红色,动画效果的颜色为深红色。

  6. 在左侧工具栏上选择SVG形状拖动到管道右侧,上传基础色为蓝色的阀门svg图片。

    valve.svg

    1. 绑定 1_空压机的排气压力。

    2. 设置条件格式化,排气压力小于或等于0,基础样式重新上传基础色为红色的阀门svg图片。

      valve-red.svg

2.2.4 添加格式化

  1. 管道及阀门动画如下,满足条件格式化条件时,管道及阀门颜色变成红色。

    管道

  2. 继续添加其他设备并绑定数据及更改条件格式化,然后手动排版成型。

    设备监控-conditionalformat