新基建背景下，智慧园区立体管控系统解决方案诞生，管控整合园区各关键环节资源，整合光伏、变电站、停车场等，使各系统实现互联、共享、智能化，实现多信息协同联动，为园区安全管理、业主便捷生活、物业信息化管理提供有力保障。有效降低了企业的运营成本，提高了工作效率，增强了各园区的创新、服务和管理能力。基于这种情况，我们通过HTforWeb构建了图浦公园的智慧管控系统。应用场合及优势 适用于工业园区综合管理、产业园区、智慧社区、房地产等场景，应用领域广泛。1、数据可视化： 融合了企业数据可视化、能耗数据可视化、报警设备可视化、设备数据可视化等多维度立体展示。2、设施管理和巡检自动化： 通过自动化技术和物联网技术的应用，将园区基础设施逐步升级为智能化设备，实现远程监控和控制，实现智能化。3、各部门协调管理一体化：实现 智能化管理后，可轻松掌握园区运营状况、园区设备管控及各项服务。4.各环节的通讯和信息化： 通过平台建设整合园区内的信息，大大提高园区系统的集成度，信息和资源将更加充分共享，提高各项管理效率链接将得到改善。5、安全管理： 安全管理将监控系统、报警系统、管理系统、巡更系统、停车系统等有机结合，实现一体化综合管理和系统联动。6、能耗管理： 能耗管理是园区重要的管理应用。可在线监控园区能源消耗状况，进行趋势分析管理和能源成本数据统计。在保障园区供电设备安全运行的同时，还可以对设施的综合能耗进行自动管理，为设施的节能管理和改造提供依据。7、环保管理： 环保管理通过园区综合生态监测系统，对园区内的温度、有害气体、火灾、风雨等自然状况进行监测。同时，还可以对园区内的垃圾、水质、空气质量、噪音、污水等环境质量进行监测，及时进行数据汇总和报警。对园区各类突发事件进行全方位监测、预警、判断、决策、调度和处置，形成感知园区统一协调指挥体系。8、服务管理： 服务管理包括数据中心、信息发布等服务子系统。通过物联网等先进信息技术，将园区内的通信网络整合为一个统一的平台，实现互动共享的生态系统。强化个性化、多元化服务能力，为园区企业提供更加便捷的服务。针对园区信息发布需求，设计思路具有前瞻性、可扩展性、实用性，输出集中控制、统一管理，为园区企业提供智能化展示和分析报表。具体应用实例1、能源： 对能耗数据进行动态监测、统计、报表分析，为后台决策提供依据。据统计，每年可为园区节省20%~30%的电费开支。2.安全： 以监控区域内的各种探测器作为感知层，利用通信技术和网络技术，通过多种信息的协同分析，实现对异常事件的智能判断并执行预定义的联动响应，潜力巨大灵活性和良好的可扩展性可以有效降低误报率。3、停车场： 利用传感器节点的感知能力，对每个车位进行监控和管理，提供专项引导服务，实现停车场车位管理和车位释放功能，提供车位引导和车辆查询为园区人员等职能服务，完成停车资源的统一规划和高效管理。据统计，园区车辆平均速度提高了8.8%至14%。4、智能消防： 采用现代计算机、通信、控制和信息综合决策技术，对分布在各地的建筑物的消防设施进行远程监控，及时掌握消防系统的运行状况。即时的。一旦发生火灾，系统会将火灾报警信息实时传输至城市应急响应中心，以便快速发现和处理各种火灾隐患。5、智能家居： 智能家居系统是通过互联网、物联网，将工作、生活场所智能化、自动化，利用先进的互联网、电气自动化技术、RFID、ZIGBEE、无线电技术进行集成智能照明和智能家电。、智能监控、智能安防报警等系统有机结合，通过网络管理相关设备和实时监控办公系统，进而提供优质、舒适、节能、健康、环保的工作和生活环境为园区企业。人才带来轻松、愉快、便利的工作和生活环境。6、智能应急指挥： 连接防盗报警、视频监控、门禁、消防等系统，提供数字化预案支持，多系统联动，警觉主动通知，实时报警基于电子地图的测绘与分析通知、智能应急决策辅助、远程监控指挥功能等，提高园区应对各种突发事件的快速反应能力。实现思路 整个绘图除了中间场景是3D的，其他元素以2D为主，先来做基本设置和交互限制：//隐藏选中边框gv.getSelectWidth=()=>{return0}//禁止原语移动gv.setMovableFunc(()=>{returnfalse})//禁止缩放//禁止移动gv.setZoomable(false)//禁止选取框gv.setRectSelectable(false)//隐藏滚动条gv.setScrollBarVisible(false)//全局设置右键菜单禁用window.document.oncontextmenu=()=>{returnfalse} 由于结构是长屏，为了让用户使用普通屏更舒服,或者更容易调试，我们要做一些特殊处理：//水平滚动gv.adjustTranslateY=(ty)=>0//限制平移范围gv.adjustTranslateX=(tx)=>{letviewRect=gv.getViewRect(),scrollRect=gv.getScrollRect(),minX=(viewRect.width-scrollRect.width)*gv.getZoom()tx=Math.max(minX,tx)tx=Math.min(tx,0)返回TX}gv。getScrollRect=()=>{//根节点返回gv.dm().getDataByTag('contentRectNode').getRect()}this.fitContent()//调用window.addEventListener('resize',()当窗口changes=>{this.fitContent()})//接口扩展fitContent(){constwinInfo=ht.Default.getWindowInfo(),contentRectNode=this.gv.dm().getDataByTag('contentRectNode'),height=contentRectNode.getHeight(),zoom=winInfo.height/heightif(!height){ht.Default.callLater(()=>{这个.fitContent()})return}this.gv.adjustZoom=()=>zoomthis.gv.setZoom(zoom)} 中间场景是通过renderHTML渲染一个新的绘图到2D页面，HT绘图是由Canvas实现，renderHTML的DOM必须在Canvas之上，所以我们在绘图的中心挖一个洞，然后修改两部分的层级位置，让效果更好：//Setgv.getCanvasforthehierarchyof2Ddrawings().style.zIndex=300//设置3D场景的层次g3d.getView().style.zIndex=200 先来看看半圆菜单栏。让我们先将属性绑定到图标中的元素。明确要驱动的部分，即小扇子的横竖缩放比例、颜色透明度、提示框的裁剪比例等，然后通过改变状态来区分不同的选项： 还有一个扇形图在面板中的轮播图，也是通过提前绑定属性，然后启动一个定时器来切换它的状态，风格一致，一样的动画效果，一起来看看吧： 介绍一下表格的动画效果： 表格控件基于HT向量封装，为了方便我们后期开发，内部暴露了多种属性，可以通过调用来实现效果。这么漂亮的UI也是一大亮点。我们可以预先设计好图标，然后配置columns定义columns属性来绘制表格行，其中滚动部分是通过表格的行高来计算的。然后按时增加其变化系数num的值，实现表格滚动的动画。动画功能在我之前的文章中已经提到，这里不再赘述。有兴趣的朋友可以点击查看学习。 得益于HT庞大实用的图标库，各种类型的面板和风格设计层出不穷： 本轮播的动画制作方式类似于表格。首先，我们导入我们绘制的图标。在drawItem函数中，我们计算系数以编写动画作为偏移量。 关于这个可爱的小机器人零件，让我分解并解释给你。第一部分是整个机器人。它的表情是可以切换的，类似于我们上面说的菜单切换。它们都是切换状态。我们通过不同的状态来切换不同的人脸图标。另外，后面的动画也非常细致，就是一些光球的背景上升，自身的漂浮，以及底部光环的缩放。从背景中提取光球做一个图标，放在后面做背板。请注意，它应该比原来的长。我将内部元素复制成双倍大小并加倍。然后打开图标的裁剪属性，隐藏图标以外的部分。到这里大家可能已经想到了，然后调整图标的垂直偏移量。 主体的漂浮和波纹的缩放是通过呼吸感改变相应的属性完成的，通过交换起点和终点的值产生动画效果。 停车场内建筑物的明暗变化也是通过这种方式实现的。流动的线对每条线的切割率进行操作，使其朝着一定的方向增长： 车辆的变化是通过随机计算的方式来修改自己的可见性，位置提前放好就可以了最简单的方法。 其他场景都是3D场景，也需要基本设置：//禁止拖动gv.setMovableFunc(()=>{returnfalse})//隐藏选中的帧gv.getWireframe=(d)=>{d.s('wf.visible',false)}//设置眼睛gv.setEye([-38,729,1109])//设置中心点gv.setCenter([-35,-4,218])//设置远点gv.setFar(500000)//设置近点gv.setNear(50)//设置交互限制gv.setInteractors([newht.graph3d.MapInteractor(gv)])//设置Skyballgv.setSkyBox(this.dm.getDataByTag('skyBox')) 另外，鼠标悬停高亮效果使用的方法是：gv.setHighlightMode('mouseover') 初始场景的模型升起我们通过修改特定轴的模型比例来做到这一点。 也可以观察一些灯条的上升效果，这里我们把所有的灯条分成一组来驱动，让整体整体垂直偏移。为了让效果不突兀，我们修改它的透明度，让明暗逐渐淡入淡出。 所有科技3D场景都离不开uv偏移的效果。设计师可以大显身手，绘制丰富的纹理，为模型增光添彩。程序员使用代码来抵消uv纹理，使其变酷。效果： 值得一提的是波纹扩散的动画，之前2D界面也用过： 在3D场景下，这个元素的类型是billboard，打开3D就可以和我们互动了这些广告牌的动画，扩散其实就是一个圆在水平和垂直方向缩放的过程，同时透明度逐渐变浅，从而产生水波的效果。还有一个在场景中被广泛使用的常用动画： 其实就是一个旋转动画。根据模型的锚点位置，修改坐标轴在某个方向的角度变化。这种动画用于鸟、船和声波。方法：总结 园区智慧管理系统建设是重点。设施管理和检测自动化、协调管理一体化、各环节信息化是智慧管理的三大要素。围绕安全、环保、能耗、服务等多维度的应用建设，可以最大限度地利用资源，体现智慧园区建设的意义。凭借新的城市战略定位，打造新的城市背书，智慧园区已成为智慧城市的缩影。打造智慧园区，谋求跨越式的未来发展，需要更好地运用物联网技术、人工智能等战略性新兴技术。打造全方位的智慧园区服务体系平台，使智慧园区走向规模化、集群化、智能化升级。使资源集聚、成本优势、规模优势得到充分发挥。提升智慧园区竞争力和品牌能力，充分利用信息化管理提升自身竞争力，搭建产业园区服务管理平台，占据价值链顶端。 有了HT对Web丰富完备的图标库资源的支持，配置设计变得更加简单方便。除了楼宇和园区，还广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自??动化（HMI/SCADA）领域。同时，HT的成功和完善离不开广大用户的支持。各行各业提供的专业需求，使其日趋完善。欢迎更多大佬加入，让数据可视化无限可能。2019年我们还更新了数百个工业互联网2D/3D可视化案例集，在这里你可以找到很多新奇的例子，发现不一样的工业互联网：《分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇》，更多行业应用案例请参考官网案例链接：https://www.hightopo.com/demos/index.html
