前言楼宇自控是指建筑物中的电气设备，如电梯、水泵、风扇、空调等，主要工作性质为强电驱动。通常这些设备处于开放的工作状态，也就是说，它们不形成闭环。只要打开电源，设备就可以工作。至于工作状态、过程、能耗等，无法及时在线获取数据，更谈不上合理使用和节能。现在的楼宇自控是对上述电气设备进行在线监测，通过设置相应的传感器、行程开关、光电控制等检测设备的工作状态，并通过回传到控制室的中央计算机。线，由计算机得到分析结果，然后返回到设备端进行调解。（具体效果可以参考链接：http://www.hightopo.com/demo/building-automation-system/）代码实现第一步是对整个界面进行基本设置：gv.getSelectWidth=()=>{return0}//隐藏选中的帧gv.setMovableFunc(()=>{returnfalse})//禁止图元移动gv.handleScroll=()=>{}//禁止鼠标缩放gv.handlePinch=()=>{}//禁止触摸下双指缩放gv.setPannable(false)//禁止平移gv.setRectSelectable(false)//禁止跑马灯选择gv.setScrollBarVisible(false)//隐藏滚动条window.document.oncontextmenu=()=>{returnfalse}//禁用全局设置的右键菜单，然后开始封装面板，实现每个块包含的动画效果。这些动画效果制作简单，可以表现出整个系统的运动感，其实现方式类似，我用一个例子来演示：让n=\[\] for(让i=0;i<10;i++){ if(i<8){ num.push(Math.random()*2) } elseif(i===8){ n.push(Math.random()*40+60) } else{ n.push(Math.random()*31) } } letoldNumValue1=chillerPanel.a('l1.l.clipPercentage') letoldNumValue2=chillerPanel.a('l2.l.clipPercentage') letoldNumValue3=chillerPanel.a('l3.l.clipPercentage') ht.Default.startAnim({ duration:2000, easing:(t)=>{returnt}, action:(v,t)=>{ chillerPanel.a('l1.l.clipPercentage',oldNumValue1+(num\[0\]-oldNumValue1)*v) chillerPanel.a('l2.l.clipPercentage',oldNumValue2+(num\[1\]-oldNumValue2)*v) chillerPanel.a('l3.l.clipPercentage',oldNumValue3+(num\[2\]-oldNumValue3)*v) }, finishFunc:()=>{ setTimeout(()=>{ chillerPanelAnim() },2000) } })}关于动画的方法，可以理解为导出一些属性从初始值逐渐变为目标值的过程。HT提供了ht.Default.startAnim，支持Frame-Based和Time-Based动画。我使用基于时间的。好处是你只需要指定duration的动画周期毫秒数就够了，HT会在指定的时间段内完成动画，也就是帧数或者action函数的次数调用取决于系统环境。一般来说，系统配置越好、浏览器越高效的机器，调用的帧数越多，动画过程就越流畅，避免了由于js语言无法精确控制interval时间间隔而导致动画周期可能相差较大的问题。还有一个easing属性，可以通过数学公式计算出来配置动画的缓动效果。有兴趣的朋友可以自己打开试试看。2.5D设备的流水线部分，我通过调度给大家介绍一下：//流动画letflowTask={ interval:10,action:(data)=>{if(data.getDisplayName()==='flow1'){data.s('shape.dash.offset',data.s('shape.dash.offset')+1)}if(data.getDisplayName()==='flow2'){数据。s('shape.dash.offset',data.s('shape.dash.offset')-1)}if(data.getDisplayName()==='flow3'){data.s('shape.dash.offset',data.s('shape.dash.offset')+5)}}}dm.addScheduleTask(flowTask)这也是一种实现动态效果的方式，主要用于指定时间间隔的函数回调处理，常用于实现图形的流动、闪烁等动画效果。流程是先通过DataModel添加调度任务。当调度任务指定的时间间隔到来时，DataModel会遍历所有原语，回调调度任务的动作函数。您可以修改该函数中传入的Dataprimitives的相应属性来实现Animation效果。更多参数和设置请参考调度手册。还要注意的是，需要交互的图元的鼠标移入和移出事件最好分别设置view.setCursor('pointer')和view.setCursor('default')，以增强交互体验。同时，制作2.5D图元实际上需要比普通2D图元多几倍的工作量。除了按照真实角度的透视图建模外，每个部分都需要单独制作。这带来了可能滞后的问题。我们在做的时候一定要注意使用缓存规则来优化性能，尽量把每一个细节做到最好。cacheRule相当于使用同一张图片。默认规则是：图标名称+宽度+高度+缩放。如果确定规则一致，则使用相同的纹理。如果还有其他需要影响的，会返回更多的信息，比如data.a('color')，这个会额外判断它们的属性是否一致，只有一致才使用同一个缓存。如果它们不一致，尝试创建一个新的缓存纹理，这更适合静态的。摘要进入21世纪的今天，随着计算机技术和信息技术的飞速发展。建筑物内各种设备的状态监测和测量不再是随机的方法，而是扫描测量。智能建筑（IntelligentBuildings）是建筑技术与互联网技术相结合的产物，是信息社会和经济国际化的需要。我们今天建设的楼宇自动化控制系统（BAS）就属于这一类，它也是由通信自动化系统（CAS）和办公自动化系统（OAS）组成。现已广泛应用于各个领域，大大提高了管理效率、能源有效利用率、设备监控等智能一体化操作系统。还有更多高端智能操作系统等着我们推动社会信息化的进步！HTforWeb:(http://www.hightopo.com/demos/cn-index.html)
