找回密码
 立即注册

QQ登录

只需一步,快速开始

nimotea
超级版主   /  发表于:2024-7-19 09:53  /   查看:271  /  回复:0
本帖最后由 KarenGao 于 2024-7-24 11:05 编辑

背景
作为工业数据可视化的重要一部分,组态图往往能将设备的实时状态,机器的运行数据实时的呈现在最终端,方便业务人员实现对一线现场的无人监管。所以,Wyn8.0 版本新推出了拓扑图系列可视化组件,通过手动拖拽的方式,BI 工具也可以轻松设计出像这样的工业组态图了。

拓扑图.gif


拓扑图.png533157958.png



ezgif.com-video-to-gif-converter (1).gif15408019.png


使用步骤
8.0 全新引入拓扑图组件主要分为如下几种:
  • 基础形状(矩形、圆形、星形等形状结构)
  • 线条 (直线、曲线、折线等线条)
  • 文本 (轻量化的富文本组件)
  • 自定义形状 (svg、png 素材)
拓扑图组件.png181546019.png

数据绑定:同时所有形状和组件可绑定来自数据集和数据模型已经MQTT采集的物联网数据,通过集成实时数据来实时监控设备状态。



形状、文本自定义形状等组件的使用:方式和普通图表使用方式基本一致,拖动组件后,可以通过配置右侧属性来调整样式布局展示内容,不同的是,线条组件的在使用时会有更多技巧。
基本使用方式.png998187255.png
最一般的我们可以通过调整宽高来调整线条位置,这种方式对于固定线条位置来说会非常麻烦,这时我们只需要点击线条组件右上角的编辑图标,就可以更灵活的控制线条内容。
线条编辑.png758905029.png

编辑状态下,可以拖拽线条节点来移动线条位置
拖拽节点.png35257567.png
除了拖拽位置,通过单机节点中的虚拟节点也可以新增控制节点。
单机中间节点.png981238098.png

右键点击中间实体节点时可以删除对应节点
删除节点.png818453674.png

另外一个小技巧是,当我们按下 ctrl 键拖动节点时,如果节点和相邻节点连线处于垂直状态会有自然吸附效果。

动画设置:
通过手动拖拉拽各种基础组件,我们可以拖拽出 工业网状结构中的各种组件和连接线条,当然,只是基本的展示出来,这还不足以说明新特性的强大,毕竟传统组态工具会针对不同的情况提供各种提示性或者强调内容的 动画效果,这些也同样在我们新版本的特性中有所体现,比如最基本的形状动画。


闪烁
形状发光.gif351943969.png
发光
image.png437535704.png
流动
形状流动.gif617571410.png
呼吸
形状呼吸.gif570470275.png


这些动画都可以在形状元素的右侧动画属性中配置
形状动画配置.png831022033.png

同样的各种线条动画样式也是少不了的,可以用线条的箭头、动画等配置效果来模拟各种轨迹,流动效果。

闪烁
线条闪烁.gif903954772.png
发光
线条发光.gif257197875.png
流动
线条流动.gif388017577.png
轨迹
线条轨迹.gif46677855.png
Svg 结合一些组态素材,也能在场景模拟上极大丰富看板的表现力。
组态效果.png161152648.png

绑定数据并设置条件格式化:
最最关键的是,基于上面提到的这些元素都可以绑定数据,并设置条件格式化来动态搭配各种效果实现预警,比如文字内容、背景色、动效、内容显示与否(透明色),我们就可以实现各种炫酷的工业组态场景了。尤其是搭配上 8.0 对接物联数据的能力,可以实时的对工业设备进行全面监控。

比如:设备压力大于10的时候折现红色闪烁。
image.png712921752.png

最终实现效果如下:
拓扑图预警.gif

Demo下载:
wyn-export-20240723144916.zip (1.51 MB, 下载次数: 21)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部