基于Web的管廊可视化信息管理系统设计与实现

陈登峰,张 温,耿建勤,刘 国,肖海燕

(1.西安建筑科技大学 建筑设备科学与工程学院，西安 710055;2.西安建筑科技大学 信息与控制工程学院，西安 710055)

0 引言

随着我国经济的快速发展与城市化的高速推进，“马路拉链”、“蛛网线路”等“城市病”不断加剧，城市地下综合管廊(简称管廊)是重要解决手段之一[1]。管廊是位于城市地下的一个相对密闭的空间，在其运营过程中，会产生如CH4、CO等有害与易燃气体[2]，当CO气体吸入过量，轻则使人头晕恶心，重则会导致人死亡，故对管廊舱室CO指标实时监测与预测十分重要，目前，国内外综合管廊运营维护中的巡检等工作还以人工为主[3]。现有的将BIM(建筑信息建模技术)用于管廊管理的可视化系统大多C/S架构，由于模型中所包含数据量较大、数据结构较复杂且专业性较强[4]，导致系统操作难度大、硬件要求高、不可跨平台且缺少安全性预测功能。

文章提出基于Web的管廊可视化信息管理系统，管廊运营者可通过移动端、电脑端浏览器以3D模型漫游管廊、查看管廊建筑数据、监测实时环境数据，并根据CO环境数据预测值、实时环境数据以及管廊轻量可视化实现危险早期处理。

1 整体设计

1.1 功能分析

管廊运营维护过程中，运维人员需通过不同终端进行管廊信息可视化查阅和管廊环境数据实时监测，当监测或预测到异常需快速定位故障舱室，并辅助给出解决方案。基于需求确定系统采用B/S架构[5]，并满足以下功能需求：

1)BIM轻量化：将BIM几何信息与建筑信息解耦，并将所需建筑信息存入数据库；2)模型加载：将BIM几何信息可视化在Web页面并与建筑信息以及实时环境数据动态耦合；3)环境数据采集：系统后台服务与终端节点建立通信并将其采集的环境数据存入数据库；4)实时数据展示：将终端节点采集的环境数据以交互形式展示在浏览器前端模型及实时动态曲线；5)数据管理：历史环境数据查询、终端节点属性信息查询与更新；6)环境数据预测：以CO历史数据作为训练样本，通过浏览器在线训练LSTM预测模型并对递增2小时CO数据在线预测并显示和预警。

1.2 设计方案

系统中使用管廊BIM模型Revit搭建。系统包括终端节点、服务软件和前台软件组成，如图1所示。

图1 系统总体功能图

终端节点由传感器、控制器、无线模块组成，部署在管廊舱室中。终端节点采用TCP通信方式，将采集的环境数据实时发送给服务软件并存入数据库中。

模型轻量化模块将BIM模型解耦为几何信息与建筑信息。该部分由C#整合Revit二次开发实现，通过Revit的建筑模型Id建立管廊子模型与建筑信息的对应关系。

数据库模块分为数据视图模块与存储过程模块，其中数据视图模块用于建立数据库表间逻辑关系，存储过程模块用于每日定时对数据库实现特定功能。

后台服务模块为该系统提供整体依托，提供对数据库查询与更新、对终端节点采集的环境数据信息的获取与存储、响应前端页面请求、对前端的数据以及其他服务支撑。

前端页面模块由模型加载模块、动态刷新模块以及其他Web元素构成。模型加载模块使用WebGL与Html5实现[6-7]，动态刷新模块使用Ajax技术与后台服务模块交互获取实时环境数据。气体数据预测模块采用Tensorflow.js框架实现回归预测，结合Javascript实现浏览器端对环境数据模型训练与在线预测。通过浏览器在线训练LSTM(长短期记忆网络)CO(一氧化碳)预测模型实现对递增时间节点指标数据的在线预测。当监测或预测到某舱室异常，可向管廊运营者进行危险预警，给出异常状况辅助解决方案，以减轻或避免危险的发生。

2 详细设计与实现

2.1 建筑模型轻量化

BIM在建筑几何模型上附带有施工过程的大量静态属性信息，导致存储空间较大。如在Revit中绘制6面墙，所生成的项目文件大小为4.47 MB，而几何数据仅占12.5 KB。故需将建筑模型加载在前端页面，轻量化是必不可少的，系统使用文件为Obj文件，文件结构见表1。

表1 Obj文件结构表

使用C#与Revit二次开发API实现模型轻量化导出。结合Revit二次开发API解析建筑模型Rvt文件，将各Id对应几何数据以Obj文件中g标识分割，通过文件流写入Obj文件。

将属性信息通过动态链接库MySql.Data.dll以Id为索引写入Mysql数据库。目的是实现将建筑几何数据与建筑属性信息解耦以达到轻量化的效果。其中g中包含Id信息，g表示以下的几何数据信息为该Id对应的建筑模型几何数据。

2.2 环境数据预测模块

由于不同舱室气体环境有异，且舱室环境数目较多，为提高预测数据精度减轻服务端压力，设计一种基于浏览器的分布式CO预测模块。

该模块将传统基于PC服务端的模型训练与预测移植到Web客户端，采用google近期推出的tensorflow.js框架[8]，训练与数据预测的功能由浏览器支持实现而无需后台支持，也不需要复杂的环境部署与库文件调用过程，只需使用移动端或电脑端浏览器即可实现对环境数据的训练与预测，将训练和预测的流程由服务端移植到客户端。不同管廊舱室可针对每个舱室的历史数据给出个性化的预测结果，管廊内部环境密闭，其中CO含量实际是等间隔连续的时间序列，LSTM(长短期记忆神经网络)深度神经网络对时间序列数据预测准确性较高[9]，本模块采用LSTM对CO数据进行预测。在线模型训练流程如图2所示。

图2 在线模型训练流程图

基于浏览器的分布式CO预测模块运行流程描述如下。

步骤一：登录系统选择某终端节点历史表信息点击查询，查询结果会作为样本数据以Json形式存储在公共变量中；

步骤二：将样本数据:

X={x1,x2,…,xn}

整合并做标准化操作，计算数据顺序涨幅百分比:

步骤三：使用滑动窗口法初始化数据，构建训练数据，设置输入维度，滑动步数，以张量存储；其中张量Tensor是一维或多维数组的结构，是Tensorflow.js的数据中心单位。

步骤四：设置少量训练数据来作为测试数据对已训练模型进行验证，设置过程如下所示：

await model.fit(xs, ys, {validationSplit: 0.2});

设置参数为0.2，即80%数据用来训练模型，剩余20%数据用来对模型进行测试验证。

步骤五：优化算法选择RMSProp，损失函数使用MSE(均方误差)。设当前收敛过程中迭代次数为t，RMSProp优化算法描述如下：

sdw=βsdw+(1-β)dW2

sdb=βsdb+(1-β)db2

其中:sdw、sdb为上一轮迭代过程梯度动量，β为梯度累计指数，W权重值，b为偏置值，ε取值10-8防止分母为0，发生异常。损失函数描述如下：

model.compile({optimizer: rmsprop,

loss: tf.losses.meanSquaredError});

步骤六：训练LSTM模型并应用模型进行预测，预测部分代码如下：

await model.predict(tf.tensor([input])).data();

步骤七：整合使用tfvis可视化框架对样本数据、训练过程以及预测信息可视化，如图3所示。

图3 训练过程

其中loss指训练集损失，val_loss指测试集损失。

2.3 数据库设计

设计的数据库包括用户信息表、终端节点信息表、环境数据表、历史信息表。

用户信息表用于支持用户登陆系统校验，其列信息包括用户id、用户名、密码、用户角色。用户在前端页面输入用户名、密码以及角色后，该信息会与数据库中存储的用户信息进行比对，如信息匹配，则用户登陆成功，页面展示对应角色的内容，否则，提示登录失败。

终端节点信息表用于对终端节点信息查询与更新，其列信息包括终端节点Id、终端节点名称、终端节点在实际综合管廊中所处的舱室信息、节点持续使用时长。管理员角色登陆系统后，可对终端节点信息进行更新与查询，其中更新操作包括增、删、改；舱室位置为语言描述，描述内容为该节点所处管廊的舱室位置；使用时长为自动生成，自终端节点投入使用后算起。

环境数据表用于存储终端节点采集的环境数据，其列信息包括数据Id、时间戳、传感器节点Id、温度、湿度以及O2、CO、CH4、H2S浓度，结构如表2所示。

表2 环境数据表结构

SenId与终端节点信息表的Id对应，后台服务端接收终端节点采集到的环境数据存入该表中，前端页面中实时动态曲线通过Ajax定时从数据库查询获取最新的数据。

历史信息表用于存储历史环境数据，该数据表为气体环境预测模块提供训练样本，同时可供系统使用者查看，其列信息包括Id、终端节点Id、当日日期(精确到小时)、平均温度、平均湿度、平均O2含量、平均CO含量、平均CH4含量、平均H2S含量，所有平均值均为每日每1小时的平均值。其内容更新由已编译的存储过程在每日零点定时进行。

2.4 系统前端

系统前端使用JavaScript、CSS、Highcharts、EasyUI与Sim.js设计与开发，可实现建筑信息模型轻量可视化、环境数据实时曲线、终端节点管理与历史数据查询的功能。实时数据展示中实时动态曲线使用Highcharts结合Ajax局部刷新技术实现，每次单位时间查询获取数据库中该终端节点采集的最新环境数据，整体采用setInterval方法实现定时发送Ajax请求。在请求的过程中使用轻量级的Json作为数据传输的格式，模拟面向对象的过程。系统使用WebGL绘图协议的开源框架Three.js整合Sim.js将三维模型Obj文件加载在前端页面中，模型加载过程部分代码如下：

//创建Obj加载对象

var loader=new THREE.OBJMTLLoader();

loader.load('../model/pipe.obj','../model/pipe.mtl',function(object){

//遍历Obj模型文件结构

object.traverse(function(obj){

//按照Id依次将模型对象加入场景中

that.createmodel(obj,this.boxcount);});

this.focus();

this.count = 0; //模型计数器

this.createPlane();//创建地面}

其加载过程具体描述如下：

步骤一：使用ObjLoader.js中的Load方法对Obj文件进行解析；

步骤二：结合traverse方法，对每组几何数据进行解析；

步骤三：结合面向对象的思想，将模型Id以及Mesh信息构建几何对象；

步骤四：遍历上述对象，将对象加载在Scene中，最终通过render渲染在前端页面。

文件加载采用面向对象方法的目的是方便为每个子模型附加交互函数。

2.5 后台设计

后台服务为前端提供服务支持，采用Java开发，使用SSM(Spring、SpringMVC与MyBatis)整合框架，应用MVC框架(Model、View、Controller)，复杂逻辑实现于Controller控制器部分，View指前端界面，Model指数据的封装部分[10]。该框架将前后台程序分块解耦，增加了代码扩展性与复用性。

系统中，后台服务模块需要具备以下功能：1)实时数据采集：获取终端节点的实时环境数据并存入数据库；2)实时数据展示：数据展示的方式可分为用户与管廊模型交互展示和实时动态曲线；3)数据查询：可对历史数据以及终端节点数据进行查询；4)终端节点管理：当更新管廊终端节点后，同步更新传感器节点数据；5)角色控制：控制不同的角色登陆系统并展示不同功能，角色分为管理员与非管理员。

后台服务模块数据持久层采取MyBatis，它支持个性化Sql与存储过程，该框架将JDBC细节掩盖，将数据库配置集成于xml文件。

出于安全性与数据完整性的考虑，系统中的后台服务与终端节点采用TCP/IP通信协议交互。终端节点为通信客户端。由于管廊中终端节点数量众多，故在后台构建TCP服务端线程池，可以节省大量资源。线程池与终端节点交互并将终端节点Id以及采集到的环境数据存入环境数据表。

3 实现效果

管廊可视化信息管理系统功能主要包括管廊场景漫游与交互、数据库表维护以及基于Web的在线预测。

系统运行环境为Windows10、Cpu i5-7500、显卡GTX-1060、内存8 G，系统开发语言为Java，Ide为Myeclipse10，数据库为Mysql，数据库可视化工具选择Navicat Premium 12，后台服务使用SSM整合框架，前端使用jquery.js、tensorflow.js、hightcharts.js、three.js以及sim.js等开发实现，项目依托tomcat7服务器部署。

3.1 轻量可视化

管廊BIM模型轻量化解耦以及可视化页面如图4所示，其中(a)为二次开发导出并存储在mysql中的建筑信息，(b)为revit中绘制的模型，(c)为轻量化后加载在前端页面的效果图。

图4 轻量可视化

前端页面加载轻量化后的管廊场景，可对场景漫游。当点击左侧菜单中的终端节点后会将相机视角调整至模型中对应终端节点的位置，主页面左侧会将节点附近的环境信息以及建筑属性信息显示出来。用户也可点击右上菜单选择场景浏览模式，可进行鼠标查看场景或第一人称漫游场景，用户与场景中的建筑构件交互，会将模型构建信息展示在左侧。

3.2 环境数据曲线

环境数据实时动态曲线如图5所示。该页面主要功能为将终端节点采集的环境数据以动态曲线展示，根据左侧菜单选择终端节点，主页面将展示该终端节点监测到的实时数据，数据每十秒刷新一次。

图5 环境数据实时动态曲线

3.3 数据库维护

数据库维护包含对终端节点表、历史信息表的查询与更新。

终端节点表对建筑中的终端节点进行管理，如在实际建筑中更新(增、删、改)节点，则管理员角色对该表进行更新，同时左侧菜单栏也会相应更新。

历史信息表存储每日的历史信息，可供管廊运维人员查看，同时提供数据用于Tensorflow.js模型训练。每日零点，预先编译的存储过程会定时将每日平均两小时环境数据进行均值处理，处理结果存入历史信息表中，由于历史信息表数据量不会很大，故该表仅提供查询功能，可根据终端节点、起止日期对表进行查询。

3.4 基于Web的在线预测

在线预测功能将历史信息表4天内每小时CO数据的均值作为训练样本，以实验数据为例，最终预测结果如图6所示。

4 结论

文章设计实现了一种用于管廊运营维护的信息化系统，具备以下特点与功能：

1)结合Revit二次开发将BIM模型几何与属性信息解耦，轻量化加载在Web页面中，结合Spring、SpringMVC、MyBatis，实现管廊轻量化展示、管廊交互漫游、环境数据动态更新以及建筑信息管理, 基于B/S模式开发，具有较强的跨平台性，可以使用计算机或移动端浏览器。

2)环境数据实时显示，通过交互的方式展示在前端加载的模型中，也可动态实时展示在曲线中；

3)CO数据预测性，基于LSTM对CO数据在线预测，不同舱室运营者可分布式在客户端浏览训练并预测不同舱室CO数据指标，提高了预测的精度，减轻了服务端的压力，将模型训练与预测功能由服务端分布实现在客户端。同时也很大程度上提高了系统的实用性，安全性预警可以减少不必要的人员与设备损坏，提高了管廊运维的安全性与稳定性。