基于 HTML5 WebGL 的污水处理厂泵站自控系统

2024-03-26 09:40

本文主要是介绍基于 HTML5 WebGL 的污水处理厂泵站自控系统,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

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

(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.datalet 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’) 属性的布尔值来实现。

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

方案价值

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

总结

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

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

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

这篇关于基于 HTML5 WebGL 的污水处理厂泵站自控系统的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/848063

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、