前言2018年7月，信息化部发布《工业互联网平台建设及推广指南》和《工业互联网平台评价方法》，掀起工业互联网浪潮，成为报告热词。它也是信息化发展的产物。楼宇智能化集成系统也是信息化和管理化的重要体现。以数据为基础的信息，通过可视化管理系统展示一套互联网智能优化解决方案。本系列文章结合HT2D/3D可视化工具的应用，结合面板数据展示和建筑建模场景的可视化管理。前面的内容已经讲解了3D模型和2D面板的融合。本期内容将带大家探讨智能楼宇管理系统、电梯监控系统和停车场管理系统的实现及整体系统的联合优化。界面介绍及效果预览智能楼宇管理系统的优化效果主要包括冷站、热站和中心终端智能群控的联动功能，以及楼层的智能照明。面板细节的演示详细介绍了各个场景的功能和拼接的用处。电梯及楼层监控效果可视化实时监控楼层间电梯的工作状态，并可准确浏览每部电梯的实时监控画面。停车场管理系统的监控效果停车场作为楼宇监控不可或缺的一部分，这里主要体现的是对车位的实时监控，通过简单的动画演示可以展示整个停车场车辆的运行状态，便于管理。代码实现1.智能楼宇管理系统优化效果的实现点击智能楼宇管理系统的按钮后，场景角度会根据moveCamera调到楼宇的正面角度，整体楼宇会逐渐模糊，然后透明显示建筑物的内部信息。这个动画是一个过渡效果，封装了一个tweenColor颜色变化，从一个颜色rgba状态改变颜色值和透明度来体现视觉上的变化。在效果展示上，有一种观看建筑内部信息的视觉化、沉浸式体验。具体3D模型属性变化请参考。//通过moveCamera改变眼睛和中心，将场景视角移动到建筑物的正面moveCamera(g3d,[134,399,1617],[7,40,144],{duration:2000,easing:t=>t*t,finishFunc:()=>{//使场景中建筑模型的透明度为真this.building.eachChild(c=>{c.s({'shape3d.transparent':true,});});//建筑模型线框的颜色变化tweenColor(this.building,'wf.color','rgba(72,149,232,1)','rgba(56,156,255,0.03)',{duration:2000,easing:t=>t});//建筑模型整体染色的颜色变化tweenColor(this.building,'shape3d.blend','rgba(120,180,255,1)','rgba(120,180,255,0)',{duration:2000,easing:t=>t,finishFunc:()=>{//地板设置为可见this.floor.eachChild(c=>{setNodeVisible(c,true);});this.floorLighting=1;//显示建筑信息的动画this.showBuilding();}});}});变色函数的实现是传入参数来改变节点的颜色属性变化值：节点：要改变颜色的图元节点；startColor：初始颜色的rgba值；endColor：改变后的颜色rgba值；animParams：转场动画参数；tweenColor(node,property,startColor,endColor,animParams){animParams=animParams||{};如果(!animParams.frames&&!animParams.duration)animParams.duration=5000;如果(!animParams.easing)animParams.easing=t=>t;startColor=ht.Default.toColorData(startColor);endColor=ht.Default.toColorData(endColor);constdx=endColor[0]-startColor[0];constdy=endColor[1]-startColor[1];constdz=endColor[2]-startColor[2];constda=endColor[3]-startColor[3];constpostAction=animParams.postAction;animParams.action=(v,t)=>{constx=startColor[0]+v*dx;consty=startColor[1]+v*dy;constz=startColor[2]+v*dz;consta=(startColor[3]+v*da)/255;node.s(属性,('rgba('+([x,y,z,a]).join(','))+')');if(postAction)postAction(('rgba('+([x,y,z,a]).join(','))+')');}returnht.Default.startAnim(animParams);}建筑透明后显示内部信息。这时我们可以看到各楼层的照明系统从底层一层层亮起，一开始也是通过这种方式实现的，然后大楼两侧的系统介绍板就达到了延伸的效果通过更改面板的缩放属性：//面板显示showPanel(data){ht.Default.startAnim({duration:1000,easing:t=>t,action:(v,t)=>{data.setScaleX(data.getScaleX()+(1-data.getScaleX())*v);}});}//隐藏面板hidePanel(data){ht.Default.startAnim({duration:1000,easing:t=>t,action:(v,t)=>{data.setScaleX(data.getScaleX()+(0-data.getScaleX())*v);}});}二、电梯和楼层监控效果的实现Elevator是楼宇日常管理必不可少的一环，通过可视化场景可以实时衔接电梯的运行。电梯动画效果的实现原理是通过判断电梯当前所在楼层的位置和下一随机楼层的位置来实现楼梯的动画。大楼分为50层，所以只有电梯所在的楼层很容易判断高度所在的楼层，而电梯面板也通过这个判断来实时显示楼层的信息。具体实现的伪代码如下：elevatorAnimation(data){constg3d=this.g3d;consttag=data.getTag();conste=data.getElevation();constlabel=data.getChildAt(0);//判断当前楼层letnow=Math.ceil(e/50);//为下一层取一个从1到7的随机数letnext=randomNumber(1,7);//根据当前楼层和下一层判断Letrange=numBetween(now,next);this.animationElevatorMap[tag]=ht.Default.startAnim({duration:range*800,easing:t=>t,action:(v,t)=>{//电梯运行位置设置data.setElevation(now{//销毁电梯间隔动画删除this.timeoutElevatorMap[tag];//执行电梯间隔动画后回调电梯运行动画this.timeoutElevatorMap[tag]=setTimeout(()=>{this.elevatorAnimation1(data);},Math.floor(Math.random()*5000)+2000);}});}三、停车场管理系统监控效果的实现可以在3D场景中直观的管理停车场的车位信息，也可以通过可视化控制车辆进出一个简单的实现流水线动画，实时监控进出车辆，调用这个动画可以直观的反映停车场的实时情况停车场的具体实现方案是通过车辆节点的正向流水线和反向流水线调用封装的流水线动画，实现车辆行驶和倒车入库的动画效果：每辆车的停车动画包含两条路线：forwardPath和backwardPath，分别对应车辆的前进路线和后退路线，具体驾驶伪代码如下：park(car,key='Path',finishFunc){constdm=car.dm();consttag=car.getTag();constforwardPath=dm.getDataByTag(tag+'_forward'+key);constbackwardPath=dm.getDataByTag(tag+'_backward'+key);this.animationMap[tag]=move(car,forwardPath,'forward',undefined,24,{pathEndFunc:()=>{this.animationMap[tag].stop();this.animationMap[tag]=move(car,backwardPath,'backward',undefined,undefined,{pathEndFunc:()=>{this.animationMap[tag].stop();deletethis.animationMap[tag];if(finishFunc)finishFunc();returntrue;}});returntrue;}});}move是节点沿路径的平滑移动封装函数，主要参数有：node：动画节点；path：运行路径；方向n:节点方向向前|落后;animParams：动画参数；通过绘制一条运行路线的管道，通过ht.Default.getLineCacheInfo()获取这条管道的点、分信息缓存，再通过ht.Default.getLineLength()获取管道的长度，并使用ht.Default.getLineOffset()获取指定比例的连接或管道的偏移信息，从而达到移动的效果。注意这里也设置了direction来指定动画节点的朝向，主要是通过node.lookAtX()获取节点下一个朝向方向的位置信息，设置此时节点的位置，所以从而达到节点沿路径平滑移动的效果move(node,path,direction,step=6,interval=75,animParams){letcache=path.__cache__;}如果(!cache)缓存=path.__cache__=ht.Default.getLineCacheInfo(path.getPoints(),path.getSegments());constlen=ht.Default.getLineLength(cache);动画参数=动画参数||{};constface=direction==='forward'?'前'：方向==='向后'？'返回'：方向；让currentLen=0;constpathEndFunc=animParams.pathEndFunc;constaction=animParams.action;animParams.action=(v,t)=>{if(currentLen>=len){//filepathEndFunc返回true是的，认为动画结束，后面的action不会执行if(pathEndFunc&&pathEndFunc(））返回;}currentLen=currentLen%len;constoffset=ht.Default.getLineOffset(cache,currentLen);constpoint=offset.point;node.lookAtX([point.x,node.getElevation(),point.z],face);node.p3(point.x,node.get高程(),point.z);currentLen=currentLen+步骤；如果（动作）动作（）；};returnloop(animParams.action,interval);}同时我们还可以看到车辆行驶到车位或者离开时，车位上方的红绿灯提示了这个车位的停车信息。根据车辆情况实时设置车位状态。是通过改变信号灯图片的json图标，手动刷新缓存来实现的。缓存机制对整个场景很重要。流畅是至关重要的。对于一些不需要实时刷新的面板信息，我们可以使用缓存，在下次更新时调用Graph3dView.invalidateShape3dCachedImage(node)手动刷新节点，大大提高了场景的性能。性能方面，3D面板的属性可以参考。updateLight(view,light,color){light.s('shape3d.image','symbols/parking/'+color+'Light.json');view.invalidateShape3dCachedImage(light);}总结IBMS智能集成系统管理结合各系统的数据信息、建筑模型和场景模型，充分体现了一套系统之间的功能联系。就建筑的功能而言，每个子系统负责自身信息数据的管理和运营，但通过智能化综合管理系统的管理，可以聚合每个子系统的数据信息，实现3D/2D可视化工具充分体现。随着未来技术的进步，可能不再需要亲临现场管理整栋大楼的日常运营。可视化智能综合管理系统轻松解决繁琐的日常维护，充足的数据也能实时反映设备和建筑物。相关信息。2019年我们还更新了数百个工业互联网2D/3D可视化案例集，在这里你可以找到很多新奇的例子，发现不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA同时，还可以查看更多案例及效果：https://www.hightopo.com/demos/index.html
