系列文章目录

第一节 使用ISM Web组态软件采集Modbus设备数据第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用


文章目录

  • 系列文章目录
  • 前言
  • 一、创建应用
  • 二、熟悉ISM Web组态设计界面
  • 1.装饰页面
  • 总结

前言

上一节我们已经通过ISM组态软件采集到了Modbus设备数据,这节我们就要利用这些数据开发组态利用。


一、创建应用

进入项目后,点击右侧的应用管理

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue

然后点击创建应用。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_02


点击确定后,创建应用。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_03

二、熟悉ISM Web组态设计界面

找到我们刚才创建的应用,单击设计按钮,进入应用的开发界面

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue.js_04


应用创建后,系统会默认创建一个867*765,背景为灰色的页面。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_05

1.装饰页面

点击页面的属性串口,点击页面背景,给页面添加背景图

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue_06


选择合适的背景后,页面实时更新。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_javascript_07


我们现在添加一个温度组件,显示采集的温度

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue.js_08


第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_javascript_09


点击组件,在属性串口点击动作属性,这里可以看到组件有个展示数据,我们可以选择我们创建的Modbus数据模型。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue_10


点击保存,或者按下组合键ctrl+s快捷保存。点击预览按钮。预览我们创建的界面。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_golang_11


我们通过修改Modbus slave 寄存器里面的值,可以看到组件可以动态的显示寄存器的值。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue.js_12


总结

本节只是简单介绍了组态应用把采集的数据实时显示到页面上的步骤,系统还提供许多其他的组件供用户使用,后面我会一一讲解。