还在愁水质监测管理？海创给你支招！
近年来，我国水环境污染情况仍然严峻，并且影响水环境生态安全和城镇供水安全。预警已经成为水环境数字化管理的重要手段，它是一种先进的科学方法，能够将水环境安全的控制前移，达到预防、化解风险、减少损失的目的。“水环境预警平台”是基于中海创物联网开发的，利用信息与通信技术来感知、监测、分析和整合指定区域水质的变化情况。集成了数据采集展示界面，实现了信息的互通互享，为水环境的管理提供了有效保障。其特点是整个水区域的统一管理、数据信息的实时性、准确性利于管理人员在提早做出应对准备，是一种控制水污染事故风险的有效办法。
方案特点
- 数据集中式管理
系统将影响水质的参数数据以及历史数据、船只检测的运动轨迹、船只周边的摄像监控情况等统一展示在大屏上，清晰明了。
- 数据实时且精准
数据都是通过对应的监测仪和传感器实时上传的，实时且精准。
- 生动刻画运动轨迹
通过GPS技术获取船只的经纬度上传，结合监测的水质参数，能精准的获取船只在每个监测点的位置以及每个监测点对应的水质、气象数据。
- 可查看历史数据
通过大屏的图表数据可知道近一周的水质变化情况以及监测情况。
- 复用性强
系统整体预览效果
应用场合
系统说明
系统通过海创可视化开发微微服务平台采集数据上传至阿里云平台，海创可视化平台再接收阿里云平台的数据进行使用。结合大数据可视化看板，主要用于展示当天监测区域的水质参数、当天监测不同区域水质的变化程度、监测次数、监测船周围的情况、近几天水质类别的变化情况以及检测船的监测轨迹生成等。
解决问题
系统解析
系统环境
软件：海创可视化平台、海创微服务、阿里云平台、海创云平台
硬件：水质检测仪、测深仪、气象检测仪、GPS、摄像头、无人机
创建产品
在阿里云平台分别创建产品“气象数据”、“水质监测”，添加对应属性。
创建设备
数据采集和上传
水质数据采集
登录海创可视化开发平台，点击服务开发，选择对应项目，创建微服务“水质监测”，从左边的节点列表选择http、function、阿里云IOT、海创IOT和调试节点，填写数据信息并连接。
- HTTP（请求指定数据接口，并返回数据）
- function（数据转换）
由于水质分类需要依托不同的参数进行判断以及将获取到的数据赋值给对应的设备属性，需要用function节点进行数据转换。
- 阿里云IOT（连接阿里云平台指定产品下的指定设备）
- 海创可视化平台（接收阿里云平台下发的数据）
- 调试（查看节点下发的数据内容）
显示当前连接的节点下发的数据内容，默认显示msg.payload，调试节点可以接在任何节点的后端，用于查看节点的输出数据是否有问题，便于调试。
气象数据采集
登录海创可视化开发平台，点击服务开发，选择对应项目，创建微服务“气象监测”，从左边的节点列表选择定时器、modbus、阿里云IOT、海创IOT和调试节点，填写数据信息并连接。下面挑选几个节点进行介绍。
- 定时器（设置触发类型）
可根据需求选择相应内容设置触发属性，因为要实时获取气象数据，这里选择时间戳，并设置每隔10秒触发一次。
- modbus（读取气象服务器地址）
配置完成后，点击部署即可。然后返回阿里云查看设备状态和对应数据。
登陆海创云平台，在"数据报表栏"可通过各种形式查看数据，从而更有效、直观地对数据做出判断。
水温等值线图
水温网格点位图
创建可视化大屏
场景设计制作
在海创可视化组态编辑器创建应用“水质监测”，点击“在线编辑”进入，在设计栏创建文件夹存放自己设计的元素，根据需求进行设计。以下便是水质监测看板的静态设计过程，平台拥有构建复杂应用所需的全套基础模块和组件，通过拖拉拽方法轻松实现炫酷大屏。
数据绑定
选择需要绑定数据的组件，选择绑定的微服务。
选择需要绑定的标签属性和对应的设备属性。
动画设置
- 摄像头上下跳动
摄像头跳动动画是引用了平台自定义的setAnimation方法，通过这个方法可以实现组件的上下左右跳动、隐藏显示、放大和缩小等。当前是通过设置组件的位置（x，y）中的y属性实现上下跳动：
node.setAnimation({//node为组件的标签
amiStart: {//定义动作对象
property: "y",//获取组件的属性，可以是组件的y、x、opacity、width、height等属性
from: startNum,//让组件从最初的数值
to: endNum,//变化到最终的数值
frames: num,//动画帧数
next: "amiEnd"//下一个要执行的动作，amiEnd为自定义对象名称
}
start: ["amiStart"]//从amiStart状态开始动画在鼠标移入摄像头组件时，设置图片标签隐藏，通过node.s("2d.visible",true)实现，其中node为图片的标签，true则表明显示该图片。
- 圆圈转动
圆圈旋转则是通过平台提供的hc.Default.startAnim动画函数实现的。
hc.Default.startAnim({
frames: 12, // 动画帧数
interval: 10, // 动画帧间隔毫秒数
easing: function(t){ return t * t; }, // 动画缓动函数，默认采用`hc.Default.animEasing`
finishFunc: function(){}, // 动画结束后调用的函数。
action: function(v, t){ // action函数必须提供，实现动画过程中的属性变化。
let y = (Math.PI/180)*(360*v);//v的变化范围是0-1，y的变化从0-360，即旋转一圈
node.a('rotation1', y);//设置圆圈的外圈顺时针旋转一圈
node.a('rotation2', -y);//设置圆圈的内圈逆时针旋转一圈
}
});- 船只运动轨迹
首先添加平台提供的地图组件，其次绑定船只设备数据集，然后设置地图展示的中心点位置以及地图的缩放级别，最后绑定设备经纬度，就能方便快捷的掌握船只运动轨迹。
以上就是一个水质监测预警系统的大概了
