使用中海创WEB组态产品，完成组态效果，下面以"水污染处理"为例，用海创微联采集设备数据上传到阿里云，中海创web可视化开发端获取阿里云的数据进行展示以及反馈变更的设备数据到阿里云。

水污染处理的组态看板如下图所示：

水污染处理的具体工艺流程如下：

这个组态实现的功能有：

• 数据展示
• 水管水流等级控制

前期准备

阿里云

中海创物联网

一、创建产品设备和规则引擎

我们打开阿里云，注册一个账号并登录，进入阿里云物联网平台。

1.1 产品创建

在左边设备管理中找到产品，创建后点击保存。

然后打开创建的产品，点击功能定义，根据实际设备的数据在自定义功能中添加原水池水位、厌氧池温度、厌氧池orp等。

1.2 设备创建

接着我们在产品中添加一个设备。

创建完成后有弹窗显示设备的三个唯一标识，点击一键复制，备用。

此时查看设备状态是未激活状态，查看设备，在设备运行状态中也能看到需要采集的数据暂时为空。

1.3 规则引擎创建

1.3.1 创建

1.3.2 设置规则

• 处理数据

  

• 转发数据

  

• 启动

  

二、数据采集和上传

登录海创web可视化开发平台，点击“服务开发”，选择项目（提示：创建的微服务要和组态看板在同一个项目下，数据绑定的时候才可以选到对应的微服务），创建微服务“ali水污染处理”。从左边的节点列表中拖出海创IOT、阿里云IOT、function、switch和调试节点，按下图连接，注意节点连线的端口

2.1 节点配置

关于各个节点的配置说明请参考文档海创微联

• 定时器

  

• function

  阿里云或者海创云节点接收数据格式相似，两者之间可以直接传递数据，由于本次组态看板中的报表和折线图需要设备所有的数据，所以以下的function是将接收的阿里云的数据进行整合后存储，再传递给可视化平台。

• 阿里云IOT

  

• switch

  添加switch的原因在于阿里云IOT下发的数据有两个包，一个是设备数据包，另一个是创建规则引擎产生的包，我们需要的是设备数据包

• 可视化平台

  根据阿里下发的数据可知，我们需要产品设备数据包里的items对象，这里存储着设备数据。

用于接收：

用于反馈：
此节点不需要编辑，连接即可。

• 调试

  用于显示当前连接的节点下发的数据内容，默认显示msg.payload，便于调试和查看数据。

全部完成后点击部署。

返回阿里云查看数据状态，说明连接成功。

三、web可视化数据绑定和反馈

3.1 创建应用

创建一个组态看板“ali水污染处理”，如下：

3.1 绘制图标

创建应用后，点击“在线编辑”进入，在“设计”栏新建一个文件夹“水污染处理”，用于存放自己设计的图标，这里选择几个图标进行举例说明：

3.1.1 按钮

1、在“水污染处理”文件夹下新建一个图标“按钮”，选择圆角矩形拖拽至编辑框中并设置属性

将文字拖拽至编辑框并设置属性

选择矩形，点击“事件处理”，选择按下和离开，编辑脚本

• 按下事件

data.a('Reset_bc', 'rgb(142,194,250)');//data指的是当前的矩形，表示设置矩形的背景色
data.a('Reset_pc', 'rgb(97,163,232)');//表示设置矩形的渐进色

• 离开事件

data.a('Reset_bc', '#1080bb');//data指的是当前的矩形，表示设置矩形的背景色
data.a('Reset_pc', 'rgb(97,163,232)');//表示设置矩形的渐进色

• 数据绑定并保存

  

效果图：

3.1.2 水管

将管道拖拽至编辑框并设置属性

设置拐弯：

3.1.3 公共图标复制并使用

公共图标能修改的属性比较少，如果你想引用一个图标，同时要添加自己的一些特色进去，可以选择将这个图标复制到自己的文件夹里再去更改属性、保存（例如：你想更改这个图标的颜色）

3.2 页面排版

在“ali水污染处理”页面，将准备好的素材全部拖入调整。

3.2.1 组合块

获取组合块标签后，能获取块内所有图标的属性，或者通过简单的脚本去设置图标属性，方便图标的统一管理，例如：要实现多个图标的显示隐藏如下：

3.3 页面功能介绍

3.3.1 点击按钮切换页面

将同一个页面的图标组成块后，设置块的标签，在监听视图事件方法内控制对应块的显示和隐藏,具体代码参考用户脚本。

例如，点击主页面按钮，对应的脚本为：

if(tagName=='one'){//如果单击主页面按钮
    zy.s("2d.visible",true);//主页面块显示
    history.s("2d.visible",false);//实时数据页面块隐藏
    dataTable.s("2d.visible",false);//数据报表页面块隐藏
    PAnalysis.s("2d.visible",false);//工艺解析页面块隐藏
    Anim.resume();//水管流动和风扇转动继续
}

3.3.1 主页面

• 数据显示

  我们需要对组态界面的所有展示数据进行设备数据绑定，以原水池水位为例：

• • 绑定设备

    

• • 绑定字段

    

• 水管流动和数据反馈

• • 设置标签

给每根水管设置标签：
lin0-line12

• • “确定”按钮绑定设备并且添加脚本

    

3.3.2 实时数据页面

• 下拉框

  绑定设备后，在改变事件里添加脚本：

dm.lineChart.a('seriesData')[0].name=newValue;//将newValue的值赋值给折线图的标签
if(oldValue!=newValue &&newValue!=''){//如果下拉选择的是新值
    var lineData = '';
    for(key in waterNew[0]){//循环遍历waterNew[0]对象
        if(key==newValue){//如果waterNew[0]的key和下拉值相同
             lineData = waterNew[0][key];//将key的值赋值给lineData
        }
    }
    var time = util.formatDate(new Date(),'mm:ss');//获取当前时间的分秒
    dataInsert(dm,lineData,time);//调用方法，将当前获取的值插入折线图Y轴数据，具体定义请查看用户脚本
    dm.lineChart.iv();//强制刷新折线图
}

• • 效果

    

• 折线图

  绑定设备和字段后，在属性“数据参数”的数据插入前添加脚本

• • 脚本

function(val){
    waterNew.push(val);//将获取到的所有设备数据存入waterNew数组
    var selectName=dm.Dropdown.a('hc.value');//下拉框选择的设备属性名称
    var lineData = '';
    for(key in val){
        if(key==selectName){//如果名称和val里的属性名称一致
             lineData = val[key];//将这个属性对应的值赋给lineData
        }
    }
    var time = util.formatDate(new Date(),'mm:ss');//获取当前时间分秒
    dataInsert(dm,lineData,time);//调用方法
    //折线图接收Y轴的数据格式如下，更改数据后再返回值
    var insertDatas=[
        {
            "name": selectName,
            "type": "line",
            "data": dataY,
            "smooth": true,
            "areaStyle": {}
        }
    ]
    return insertDatas;
}

3.3.3 数据报表页面

这个页面能实时查看所有数据的变更情况，表格绑定设备后，属性“行数据”再绑定字段即可。

3.3.1 工艺解析页面

通过这个页面你能实了解水污染处理工艺流程的整体信息，没有配置难点，这里不介绍了。

3.4 用户脚本

中海创可视化开发平台不仅提供丰富的可视化看板素材，还有强大的2D、3D编辑平台，现提供以下几个简单点的组态看板功能供大家参阅：
锅炉控制系统

海创进料系统

换热站远程监控系统

想要了解更多欢迎登陆中海创物联网。