前言

一道残阳铺水中,半江瑟瑟半江红。随着城市建设的迅速发展,每年都有大量新建管网水管通水运行。城市中有大量的排水设备,形成相应的城市排水系统,排水系统由检查井、排水泵站、污水处理厂、雨水口、排放口等等组成,排水设备中的检查井、雨水口、排放口等通过排水管网进行连接,日常的雨污水进入排水管网进行运输排放。目前,城市排水管网具有结构庞大,结构错综复杂等特点,现有技术中,对城市排水管网的监测、监控仍停留在大量依靠人工的模式,智能化水平,准确率都不能符合现有技术的需求。

http://www.hightopo.com/demo/drainage-pump-station/

传统城市水务行业发展现状及需求

近年来,物联网、云计算技术不断创新完善,为创建智慧城市提供了有利条件。同时,为了确保水安全,节约有限的资源,传统的水务行业正不断地探索智慧水务建设。以实现智慧生产、智慧经营、智慧服务和智慧管控,智慧水务应运而生。
1、在城市供水、排水体系中,基本依靠人工管理和巡检,确保各环节供水、排水正常,效率较低,反馈周期较长;
2、人工抄表存在扰民、“抄不准”、“估值”等多种情况,客户服务体验较差;
3、水质、水压、及关联环境数据等不能清晰掌握,不利于水务的精细化管理;
4、对于水泵、水闸、取水栓、污水处理器等水务设备状态不能实现统一管理,设备管理难度较大;
5、排水管网、污水处理设施、再生水回用等排水体系不健全。

针对水务行业市场需求,我们用 HT for Web  来打造一个污水处理厂泵站自控系统。
该系统基于物联网理念,采用信息化手段,实现对管网运行指标的实时监测,包括管网液位、流量、水质、气体、泵站运行状态等信息,保证管网安全高效地发挥作用,通过构建安全预警平台,提高应急指挥及快速处置能力,保障城市排水管线的安全运行,使得整个城市排水管线的安全运行可把握、可控制、可预测,提供科学、先进的城市级水力分析能力,更全面评估城市排水管网能力。以城市排水设施数据为基础,结合管网监控数据,气象雨情状况,实现为城市汇水区智能划分、排水规划、防涝预测提供决策依据。通过智能水表、压力传感器、开关控制阀、水质传感器、流量传感器采集数据,然后对供、排水系统中所有管线、设备 (水泵、阀门、取水栓、消防栓等) 与构筑物 (水厂、水池、水塔等) 的智能控制管理,全面掌握水务系统的运行情况如管网水位、流量、水质、水压、泵站运行状态等,保证水务系统安全高效运行。

代码实现

首先,是对一些基础参数进行设置来获得更好的体验效果:

// 禁止拖动
gv.setMovableFunc(() => { return false })
// 隐藏选中边框
gv.getWireframe = (d) => { d.s('wf.visible', false) }
// 设置眼睛
gv.setEye([583, -212, -789])
// 设置中心点
gv.setCenter([-76, -654, -133])
// 设置远端位置
gv.setFar(100000)
// 设置近端位置
gv.setNear(10)
// 设置交互限制
gv.setInteractors([ new ht.graph3d.MapInteractor(gv) ])
// 设置天空球
gv.setSkyBox(dm.getDataByTag('skyBox'))
// 全局设置右键菜单禁用
window.document.oncontextmenu = () => { return false }
// 复制初始位置
gv.scene = {
eye: ht.Default.clone(gv.getEye()),
center: ht.Default.clone(gv.getCenter()),
far: ht.Default.clone(gv.getFar()),
near: ht.Default.clone(gv.getNear()),
}

复制一下整个场景的初始视角情况方便做稍后的处理。通过监听部分鼠标事件来形成自己的操作风格(比如双击背景还原视角以及双击模型拉近视角):

gv.mi(e => {
let data = e.data
let kind = e.kind
// 双击背景
if (kind === 'doubleClickBackground') {
// 恢复视角
gv.moveCamera(this.gv.scene.eye, this.gv.scene.center, {duration : 1000})
}
// 双击模型
else if (kind === 'doubleClickData') {
// 拉近视角
gv.flyTo(data, {animation : {duration : 500}, distance : 800})
}
})

场景中有一些面板,它们是之前封装好的 2D 图标,在 3D 场景中是一个 billboard 类型,我们通过对 data.s('shape3d.autorotate') 这个属性进行设置即可实现面板是否可以随视角自动旋转,值类型为布尔值。

同时,这些面板中数值等参数我们都可以绑定好自定义的属性方便我们后期来实现数据的驱动:

data.a('name', value)
data.a('state', value)
data.a('num', value)
...

细心的小伙伴还发现墙上还有部分 billboard,可以通过点击拉近来浏览,这个小交互也增强了用户体验感:

gv.mi(e => {
let data = e.data,
kind = e.kind
// 单击模型
if (kind === 'clickData') {
// 拉近视角
gv.flyTo(data, {animation : {duration : 1000}, distance : 5000})
}
})

flyTo 方法即相机看向具体的节点或者节点列表,其 options 参数我们可以设置动画效果,direction 为眼睛处于目标的方向,是相对于目标的,受目标自身旋转的影响,distance 表示眼睛跟中心的固定距离。

最后一部分也是这个 demo 中最特别的交互效果,不难发现我们在通过滚轮缩放整个场景时,会有层次的显隐部分建筑,如房盖地板等,以此来使我们能观看到建筑内部的细节构造及设备。

我们通过判断镜头垂直视角距离来进行模型的显示或隐藏,改变 data.s('3d.visible') 属性的布尔值来实现。

this.gv.mp(e => {
const { property } = e
if (property === 'eye') {
// 当 Y 轴视角小于等于一定数值,进行隐藏逻辑
const [cameraX, cameraY, cameraZ] = e.newValue
if (cameraY <= 500) {
// hide()
console.log('应该隐藏房顶')
}
}
})

方案价值

1、无线自动抄表
大大提高抄表准确率和抄表效率,人力成本明显降低;
2、快速定位管网漏损
通过水表的网格化、实时监控、快速定位管网问题等实现漏损分析,从而降低漏损。
3、水环境数据精细化管理
通过水质、水压、温度等数据的实时回传,实现精细化、可视化管理,提升管理能力。
4、无人值守,远程统一管控
通过物联网传感设备,对于水泵、水闸、取水栓、污水处理器等水务设备状态实现统一远程管理。可实现无人现场值守,管理员和技术员可随时随地远程监控水务系统的实时状态;
5、故障主动上报,降低意外故障带来的损失
设备异常提前知晓、故障主动上报,及时发现和尽快维护,避免该设备故障导致上下游设备和工况环境的连锁故障,最大化降低设备非计划性停机频率和故障损失。

总结

污水处理厂泵站自控系统,以 3D 画面人机交互的形式展现数据,实时数据以控制面板的形式体现。同时可设定各监测数据的预警值,当数据达到预警值时具有提醒的功能。其核心模块包括:数据处理服务、管网监测点管理、监测实时数据、监测历史管理、监测数据对比、管网数据分析、监测数据接入等设计和开发。通过 HT for Web 平台,使得交互界面的设计变得更加的简单与便捷。本文为针对水务处理一块做出的一些场景分析及数据可视化的设计,若有见解及填充还望指出,为水务事业及国家的发展略尽绵薄之力。欢迎大家评论区下留言互相探讨,共勉进步!

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:《分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇》

更多好玩有趣的 demo 尽在其中,欢迎来访~~

基于 HTML5 WebGL 的污水处理厂泵站自控系统的更多相关文章

  1. 基于 HTML5 WebGL 的 智慧楼宇能源监控系统

    前言 21世纪,在能源危机和全球气候变暖的压力下,太阳能等可再生能源越来越受到关注,其中光伏建筑一体化逐渐成为绿色发展方式和生活方式,加强节能降耗,支持低碳产业和新能源.可再生能源发展,也已经成为国家 ...

  2. 基于 HTML5 WebGL 的 3D 工控裙房系统

    前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇.中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯.IT企业的布局:一方 ...

  3. 基于 HTML5 WebGL 的 3D 棉花加工监控系统

    前言 现在的棉花加工行业还停留在传统的反应式维护模式当中,当棉花加下厂的设备突然出现故障时,控制程序需要更换.这种情况下,首先需要客户向设备生产厂家请求派出技术人员进行维护,然后生产厂家才能根据情况再 ...

  4. 基于 HTML5 WebGL 的民航客机飞行监控系统

    前言 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for ...

  5. 基于 HTML5 + WebGL 的宇宙(太阳系) 3D 可视化系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  6. 基于 HTML5 WebGL 的故宫人流量动态监控系统

    前言 在当代社会,故宫已经成为一个具有多元意义的文化符号,在历史.艺术.文化等不同领域发挥着重要的作用,在国际上也成为能够代表中国文化甚至中国形象的国际符号.近几年故宫的观众接待量逐年递增,年接待量已 ...

  7. 基于 HTML5 WebGL 的智慧楼宇可视化系统

    前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...

  8. 基于 HTML5 WebGL 的智慧楼宇三维可视化监控

    前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...

  9. 基于 HTML5 WebGL 的地铁站 3D 可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

随机推荐

  1. 如何在Linux下优雅的查询日志

    做为一名合格的Java后台开发 经常需要查询线上的日志,定位线上问题 所以熟练掌握日志查询的命令 可以使你更加迅速的定位错误日志位置,及时解决问题 在此,我将介绍几个自己工作中经常使用到的日志查询命令 ...

  2. Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性

    先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...

  3. Java基础部分脑图

    这两天事情多,Java摸鱼了,就抽空写了一个脑图聊以自慰,表示自己还是学了的 下面这些全会了,恭喜你,Java的基础你可以毕业了

  4. 解决POST乱码

    在web.xml中添加字符过滤器 问题即可解决 <!--如何整合过滤器处理中文乱码问题?--> <filter> <filter-name>EncodingFilt ...

  5. Chrome截图截满滑动栏,QQ截长屏,录屏

    1.Chrome截图截满滑动栏 一般我们截图都是用QQ的Ctrl+shift+A,但是网页不好截,这里我们可以用Chrome控制台来截全网页: F12或Ctrl+shift+i打开控制台: 点击一下控 ...

  6. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

  7. MySQl 和 Redis

    MySQL MySQL 是关系型数据库,开放源码软件,主要使用持久化存储设备(像磁盘)数据存放在磁盘中,功能强大. 因为磁盘访问速度远远慢于内存,所以访问速度慢 Redis 是非关系型,高性能的key ...

  8. 微信小程序animation有趣的自定义动画

    这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例 ...

  9. stdio.h file not found mac catalina clion 头文件 找不到

    问题:mac update catalina 版本之后引发的include文件问题 ​ 近期Mac 版本升级到catalina版本,使用CLion调试c/c++程序,莫名其妙的发现,有些头文件incl ...

  10. Java第十五天,泛型

    一.定义 泛型是一种未知的数据类型,即当我们不知道该使用哪种数据类型的时候,可以使用泛型. 泛型的本质是为了  参数化 类型(在不创建新的类型的情况下,通过泛型指定的不同类型来控制形参具体限制的类型) ...