组态面板总体介绍TDengine IDMP 支持 Grafana 风格的面板之外还支持工业场景流行的组态让业务人员通过“拖拉拽”的形式“零代码”实现 Web 组态、SCADA 等解决方案可视化的呈现设备、流程的当前运行状态。目前它支持 2D 与 2.5D今后将支持 3D。它与 IDMP 的资产模型无缝结合能快速交付方案、降低开发成本。它具有如下的特点直观易用的拖拽编辑无需技术背景像搭积木一样轻松创建监控画面智能数据驱动配置一次即可让实时数据自动更新画面减少重复操作丰富的动画效果内置多种动画支持自定义让监控画面生动直观灵活的状态管理通过数据变化自动切换设备状态如运行/停止/报警可扩展的图形库支持上传自定义图形JS、SVG、图片等满足特殊需求强大的性能表现单画面可支持上万个图元满足大型工业场景需求下面是一个典型的组态编辑界面整个编辑画面由几大块组成画布画布即中央的绘画区域将图元拖拽到画布进行编辑绘制组态图。画布有各种属性比如背景颜色、网格、标尺等他们都可以个性化配置。图元它是画布的基本单元图形表达的基本元素图上的各种设备、组件都是图元。图元有各种属性比如颜色、背景颜色、大小、显示的文本、进度 (Progress)、值 (value)、状态 (State)等。工具箱顶部工具箱可使用钢笔、铅笔、放大镜、鹰眼地图缩略图、连线起点、连线终点、连线线宽、视图比例、自动锚点、禁用锚点等画图工具。图元库有基础图形库和行业图形库而且容许用户自己上传绘制的图形。配置对画布、画布上的各个图元进行配置比如颜色、背景颜色、字体、事件、动画等、可以修改其显示、交互行为等。本文档仅对基本概念以及基本操作做一简单介绍更多的细节需要自己多用才能发现。创建组态选择元素然后选择面板点击新建面板然后选择组态即进入组态编辑界面。设计组态分为如下步骤设置画布的属性包括布局、颜色、背景颜色、网格等3. 从图元库选择图元拖拽到画布4. 编辑、配置图元包括给图元配置文本、颜色、背景颜色等给图元配置事件设置事件类型比如点击、图元值变化、事件行为比如设置图元属性、播放动画、触发条件比如阈值判断让数据驱动图元的展示效果给图元加上动画效果系统内置了上下跳动、左右跳动、心跳、旋转等多种动画效果你可以自定义动画。配置图元属性包括值、进度、进度颜色、状态等并且与 IDMP 元素的属性绑定这样采集的数据就能实时驱动图元的展示。把有关系的图元连线起来可以配置连线类型以及连线动画编辑过程中可以预览编辑完后保存即可这些步骤不是需要固定按照顺序执行可以打乱。图元图元是构成监控画面的基本元素就像乐高积木一样每个设备图标、封闭图形都是一个图元。通过组合不同的图元您可以构建出完整的工业监控系统。外观设置图元样式角度设置尖角与圆角值的范围0~1旋转设置图形的旋转角度进度任意封闭图形都可以当进度条矩形、圆、svg、封闭连线、或其他任意封闭图形值的范围0~1图片外观样式可以上传图片作为图元的外观或者背景图片。字体图标外观样式可设置图元上显示文字的字体、大小、颜色、样式、粗细、行高、所在位置等。事件创建组态的关键一步是事件的定义包括事件类型、事件动作与触发条件。事件类型有鼠标移入、鼠标移出、选中等但最重要的是“图元属性值变化”。图元的属性可以与 IDMP 元素的一个属性绑定当这个值的某个触发条件满足时就可以触发指定的事件动作。而事件动作包括开始动画、停止动画等但最重要的动作是“设置图元属性”可以改变图元的展现形式比如图元的颜色、背景颜色、显示的文本等。下面挨个进行详细说明。添加事件添加相应事件即可实现相应的事件行为。tip: 部分事件行为只有在查看时才展示效果编辑时无法展示。事件类型鼠标移入、鼠标移出、选中、取消选中、鼠标按下、鼠标弹起、单击、双击、图元属性值变化。事件行为打开链接、设置图元属性、执行动画、暂停动画、停止动画、执行 JavaScript、执行 Window 函数、自定义消息。如下图为画布中图元设置了两个事件当鼠标移入时将背景色设置为绿色当鼠标移出时恢复背景色。条件触发器可以为事件添加触发条件。触发条件最常用的是“关系运算”可以对图元的属性包括值、进度、状态、文本进行逻辑判断其他属性不提供逻辑判断的支持。如下图设置当图元文本大于 30 时鼠标移入才会触发事件。图中演示文本为 40 的图元满足条件会触发背景变绿而文本为 20 的图元不满足鼠标移入时并不触发背景变绿。动效IDMP 内置很多种图元动画效果也容许逐帧自定义动画。图元动画给图元添加动画、鼠标提示设置动画时长、动画效果、循环次数、下个动画 tag、是否自动播放、是否保持动画状态。内置动画无、上下跳动、左右跳动、心跳、成功、警告、错误、炫耀、旋转、自定义。自定义动画通过新增动画帧逐帧自定义动画。鼠标提示鼠标悬浮在图元上时显示鼠标提示信息。支持两种方式参考 Markdown 语法编写鼠标提示编写 Mark 函数显示函数的返回值图元组合、状态在画布中可选择多个图形然后右键菜单选择组合/组合为状态可拼接组合为任意想要的方式可以对组合图元中的任意子图元进行图元的处理操作有利于图元复用。两个或更多图元组合为状态是极为有效的表现方式。例如开和关风机的转动与停止就可以组合为一个状态。不同颜色的报警灯比如红、黄、绿可以组合为一个状态。可以通过事件或绑定IDMP元素属性来驱动状态的修改实现动效。图元属性图元有很多属性包括颜色、文本字体、字体颜色、进度等这些通用属性都可以在外观设置里直接手动进行设置。但你可以通过配置自动控制如下图元属性背景颜色、颜色、文本颜色、文本、X、Y、高度、宽度、可见、进度值、进度颜色、值、状态、旋转、禁用等。上述的属性里其中的文本、进度值、状态、值四个属性还可以在事件的事件触发条件里进行逻辑判断。事件的设置里你可以通过选择“设置图元属性”事件行为来自动控制图元的属性。还有一种方式就是将这些属性与IDMP的元素属性进行绑定。绑定变量能快速实现实时数据动态展示。如下图所示添加属性绑定将图元的 “文本” 绑定到元素 “em-1” 的电压。当元素电压采集值变化时图元的文本在刷新数据时也会跟着实时变化。TIPS: 绑定变量之前建议选择合适的输入方式手动输入属性值测试自己想要的效果比如进度条的变化状态的改变事件的触发等。等测试达到自己想要的效果后再将属性绑定到IDMP某个元素的属性。投入生产运营的组态图元的属性一定是与元素的属性进行绑定了的。连线连线用于表示设备之间的物料流动、信号传递或逻辑关系。例如管道连接表示物料输送虚线连接表示信号传输不同颜色的连线表示不同介质通过连线动画您可以直观展示物料的实时流动状态。连线的绘制钢笔绘制连线选择线型再点击钢笔可激活使用某一个线型的绘制。开始单击左键暂停单击右键 或 enter结束esc。曲线、线段、直线、脑图曲线可以使用钢笔绘制不同类型的曲线也可以选中一条连线修改其线型。横线按下快捷键shift点击鼠标左键绘制右键结束绘制(连线类型选择直线)。竖线按下快捷键ctrl点击鼠标左键绘制右键结束绘制连线类型选择直线。斜线连线类型选择直线选择钢笔鼠标左键点击绘制起点按住快捷键ctrlshift鼠标移动角度以15°为递增角度左键单击绘制第二个点右键结束绘制。铅笔绘制连线使用铅笔可以绘制任意线型。点击“铅笔”激活铅笔工具在画布上按下左键开启绘制将会按照鼠标移动轨迹绘制连线松开鼠标结束绘制。连接图元鼠标悬浮在某一个图元上激活锚点在某一个锚点上按下鼠标拖拽到另一个图元的锚点上松开鼠标即可在两个图元的锚点间绘制一条曲线。连线变图元在连线上点击鼠标右键选择“转换为节点”。切割/合并连线切割连线选中线鼠标移入要断开的线锚点点击按下 S 键。合并连线线连接线时拖动当前选中连线连接端对齐另一条连线连接端按下 alt 键鼠标抬起结束 alt 键。连线样式选中连线后在右侧属性配置区域可设置连线的外观样式线条样式实线、虚线连线类型曲线、折线、直线连接样式斜角、圆角、默认线条渐变无、线性渐变线条颜色、浮动颜色、选中颜色线条宽度背景纯色背景、线性渐变、径向渐变背景颜色、浮动背景颜色、选中背景颜色透明度0-1锚点颜色、锚点半径≥0阴影颜色、阴影模糊、阴影X偏移、阴影Y偏移边框颜色、边框宽度≥0连线动画IDMP 为连线内置了三种动画效果让画面更有动效。动画效果水流、水珠流动、圆点。动画线宽≥0动画颜色动画速度反向流动循环次数。下个动画tag自动播放保持动画状态线性播放是/否。锚点锚点是保持设备连接的魔术扣确保当您移动设备图元时连接的管线会自动跟随调整保持画面整洁。添加/删除锚点A图元和连线都可以添加/删除锚点。键盘按下快捷键“A”鼠标移入图元点击鼠标左键即可添加锚点。键盘按下快捷键A鼠标移入锚点呈现如下状态点击鼠标左键可以删除锚点。移动锚点G将光标移动到锚点上按一下快捷键 G拖动鼠标完成锚点移动。手柄手柄的作用手柄可以精准调整局部形态不会破坏曲线其他区段的形状支持对曲线细节进行精细化微调。控制曲线弯曲方向手柄的指向决定曲线在该锚点处的进出方向曲线会沿手柄延长线自然过渡避免生硬折角。调节曲线弧度与曲率拖动手柄改变长度与角度可直接调整曲线的弯曲程度手柄越长曲率越平缓手柄越短曲率越陡峭。实现平滑过渡与尖角切换双侧对称手柄可制作连续、流畅的平滑曲线单侧独立调节可在同一锚点处实现折线 曲线的混合效果满足复杂造型需求。添加手柄H/ 删除手柄D点击连线上的锚点键盘按下快捷键 H 可以添加手柄来调节连线。激活手柄状态下键盘按下快捷键 D 可以删除手柄激活手柄状态下键盘按一下 Shift 键切换三种不同的手柄类型两端手柄完全对称一端手柄可以任意伸缩长度一端手柄可以任意伸缩长度和变换角度自动锚点在工具箱中点击“自动锚点”按钮激活自动锚点。此时在画布中连线此连线两端如果没有锚点则自动找最近的锚点自动连接。禁用锚点禁用锚点即不显示锚点。画布设置画布属性默认颜色预先设置默认颜色拖拽到画布的图元基础图形、文字、icon自动统一默认颜色。背景背景图片、背景颜色网格背景网格、网格颜色、网格大小、网格角度标尺开启标尺、标尺颜色设置画布布局选择多个图元时你可以设置画布的布局可以进行对齐操作左对齐、右对齐、顶部对齐、底部对齐、垂直居中、水平居中、等距分布左右对齐、等距分布上下对齐、相同大小、格式刷。查看图元列表这里列出了整个画布上的所有图元如果点击其中一个这个图元就被选中而且在画布上居中显示。可编辑可以编辑属性事件被锁定可以执行事件和交互被禁用不能选中完全不触发任何事件可以当背景底图。工具箱钢笔开始单击左键暂停单击右键 或 enter结束esc闭合/取消闭合enter铅笔开始连续拖动左键暂停释放左键结束esc闭合/取消闭合enter放大镜用来观察图中细节鹰眼地图缩略图组态图的全局视图鼠标点击鹰眼地图可以在画布中快速切换中心位置。图元库IDMP 系统已经包含了基础图形库和一些行业的图元库。在您使用过程中如果有更多需求可以自己制作图元上传也可联系 IDMP 团队我们可以提供相应的设计支持。系统图元库IDMP 内置的图元库能满足大部分行业的基本需求。 格式有三种原生代码JS、阿里字体iconfont、图片svg、gifvideo 标签支持 MP4、WebM、Ogg 三种格式。私有图元库IDMP 组态软件图形库是一种可扩展、开放性的图形库可根据不同的需求定制各种酷炫的组件效果和场景。支持创建图元库上传图元等。图元库管理图元库管理可以配置是否显示图元库可以仅显示您所需要的图元库。优秀案例关于 TDengineTDengine 专为物联网IoT平台、工业大数据平台设计。其中TDengine TSDB 是一款高性能、分布式的时序数据库Time Series Database同时它还带有内建的缓存、流式计算、数据订阅等系统功能TDengine IDMP 是一款AI原生工业数据管理平台它通过树状层次结构建立数据目录对数据进行标准化、情景化并通过 AI 提供实时分析、可视化、事件管理与报警等功能。