前言目前，材料采购和人工成本是隧道行业发展的两大瓶颈。例如，依靠民间借贷，融资成本高；进货价格不透明，无增值税发票；在项目控制和供应链管理方面也存在问题。成本在上升，利润在下降，隧道行业“互联网+”迫在眉睫。隧道行业机械化程度高，机械制造和采购成本非常高。此外，隧道行业的发展也面临着建筑市场的严峻考验。“互联网+”提供大数据和信息流，为传统隧道企业从机械化向数字化推进提供了机遇。隧道行业的建设项目需要持续的技术支持和经验分享。如果能够借助互联网整理和分享相关经验，将为隧道行业的发展带来智能动力。通过视频监控图像和录音系统，可以随时掌握各现场的施工情况，及时解决施工中遇到的问题，提高管理效率；交通不便，施工组织管理困难。在传统的施工过程中，人们基本上是靠人在各个工地之间来回穿梭或通过电话沟通来检查和监督施工。管理时常需要很多人参与，但仍未得到很好的管理，经常出现信息不对称、管理不到位等问题，基于“互联网+”的视频监控图像录音系统应运而生。https://hightopo.com/demo/tun...代码生成场景搭建首先创建一个3D场景，HT(http://hightopo.com)有3D组件，可以直接使用新建的ht.graph3d.Graph3dView3Dcomponent(https://hightopo.com/guide/gu...)创建实例，然后通过getView()函数获取组件底层div。既然是div，位置显示控件就简单多了：dm=newht。DataModel();//数据容器，界面上显示的所有数据都可以通过dataModel.addg3d=newht.graph3d.Graph3dView(dm);//3D组件g3d.addToDOM();//将3D组件的底层div添加到body中HT组件一般嵌入在BorderPane、SplitView和TabView容器中，而最外层的HT组件则需要用户手动将getView()返回的底层div元素添加到页面中DOM元素，这里需要注意的是，当父容器的尺寸发生变化时，如果父容器是BorderPane、SplitView等HT预定义的容器组件，HT容器会自动递归调用子组件的invalidate函数进行通知更新。但是如果父容器是原生的html元素，HT组件无法知道它需要更新，所以最外层的HT组件一般需要监听window的窗口大小变化事件，调用最外层组件的invalidate函数来更新。为了方便加载最外层组件填满窗口，HT的所有组件都有addToDOM函数，实现逻辑如下，其中iv是invalidate的简写：addToDOM=function(){varself=this,view=self.getView(),//获取组件底层divstyle=view.style;document.body.appendChild(view);//将组件底层div添加到body中style.left='0';//HT组件默认设置position样式属性为absolute绝对定位方式style.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);}场景序列化最让我开心的是我的开发和设计部分基本完全分离了，因为HT可以直接通过ht.Default.xhrLoad函数加载json文件的场景，这样我和设计师是一个双进程，很开心~加载一个场景分三步，如下：ht.Default.xhrLoad('scenes/tunnel.json',function(text){//加载json场景varjson=ht.Default.parse(text);//转义json文件dm.deserialize(json);//将json内容反序列化到场景中//你可以在这个里面任意操作datamodel数据容器中的数据}animation我在场景中添加了一些函数，包括上面提到的一些动画操作，HT封装了dataModel.addScheduleTask(task)通过操作数据容器dataModel(https://hightopo.com/guide/gu...)来控制加载动画，animation部分声明在参数task，task是一个json对象，可以指定如下属性：interval：间隔时间，单位毫秒，默认值为10enabled：是否启用开关，默认为trueaction：间隔动作函数，这个函数必须设置我的动画，一共三个，各两个隧道有风扇、风向标和卷帘门只需设置这三个原语即可更改。我在json中设置了这三个原语的标签为feng、feng2和door，代码中可以直接调用这三个原语的标签属性：vartask={action:function(data){if(!data.getTag（））返回;vartag=data.getTag();//获取原语的标签属性if(tag==='feng'){data.r3(0,(data.r3()[1]+Math.PI/12),0);//r3是3d中的旋转，其中y轴在原图上旋转了Math.PI/12角度basis}elseif(tag==='feng2'){data.r3(0,0,data.r3()[2]+Math.PI/12);}elseif(tag==='door'){if(data.getTall()>0){//获取图元的tall属性，高度data.setTall(data.getTall()-20);//设置高度为当前高度减去20}}}}dm.addScheduleTask(task);//在数据容器dataModel中添加调度任务然后创建一个表单form，在表单上添加一些信息，比如流量的切换灯光等。场景中默认显示的右上角的form表单这里不再说明。内容和点击红绿灯时出现的表格类似，所以我们主要讲解点击红绿灯时出现的表格：表格中有很多重复的部分，所以我挑出三个部分来解释：文本部分，“当前状态”显示图标和下方“修改状态”中的图标点击选择部分：form.addRow([//addRow添加一行，这部分是添加一个标题{element:'trafficlightcontrol',//这一行第一部分的显示文字align:'center',//文字对齐颜色:'rgb(0,210,187)',//文字颜色font:'bold16pxarial,sans-serif'//Textfont}],[0.1]);//记得设置这一行的宽度form.addRow([//这一行有两部分，一个"deviceDescription",一个文本"0",所以要设置两个宽度，宽度要放在数组'Devicedescription:',//第一部分{//第二部分元素：'0'，颜色:'rgb(0,210,187)'}],[80,0.1],34);//addRow函数的第二个参数是宽度设置，将上面内容的宽度依次放入这个数组中第三个参数是高度form.addRow(['Currentstate:',{//也可以将数组的某部分设置为空串占用一些宽度，这样比例调整的比较好element:''},{id:'105',//id唯一标识属性，可以通过formPane.getItemById(id)添加到对应的item对象中button:{//按钮，设置该属性后，HT会自动根据属性值.widget.Button对象，保存在元素属性icon上：'symbols/tunnelicon/light.json',//按钮背景上的显示图标：'rgba(0,7,26,0.60)',//按钮背景borderColor:'rgb(0,7,26)',//按钮边框颜色clickable:false//是否可点击}}],[80,0.1,84],30);form.addRow([//如果与上述行的距离差与其他行的距离不同，可以通过添加空行来设置高度'',{element:''}],[200,0.1],10);form.addRow(['modifyStatus:',{element:''},{button:{icon:'symbols/tunnelicon/light.json',//设置按钮的图标背景:'rgba(0,7,26,0.60)',borderColor:'rgb(0,7,26)',groupId:'btn',//通过getGroupId和setGroupId获取和设置组ID，属于同一组的切换按钮互斥功能。接下来的三个按钮也设置了相同的groupIdonClicked:function(e){//点击后的回调函数btnClick('light');}}}],[80,0.1,84],30);这个表单表单的背景只是一张图片：background:url('assets/control.png')no-repeat;还有一部分上面没有提到，就是点击按钮后调用的btnClick函数：functionbtnClick(imageName){if(flag===1){//根据3d事件进行判断，dm.getDataByTag('light').s({//通过getDataByTag获取节点，设置节点的样式style'back.image':'symbols/iconfortunnel/'+imageName+'.json',//设置的背影theprimitive'front.image':'symbols/iconfortunnel/'+imageName+'.json'//将图片元素设置为您的正面图像});}elseif(flag===2){dm.getDataByTag('light1').s({'back.image':'symbols/tunnelicon/'+imageName+'.json','front.image':'隧道的符号/图标/'+imageName+'.json'});}else{}form.getViewById(105).setIcon('symbols/iconfortunnel/'+imageName+'.json');//设置id为105的item上显示的图标为按钮的图标trafficlightclickedontheform}最后是click事件，点击红绿灯会直接切换红绿灯的颜色（实际上是切换模型的贴图）：g3d.mi(function(e){//添加InteractorListener该函数监听场景中的事件if(e.kind==='clickData'){if(e.data.getTag()==='jam'){createDialog(e.data);}elseif(e.data.getTag()==='light'){//如果图元是后隧道的光varfrontImage=e.data.s('front.image');varimageName=frontImage.slice(frontImage.lastIndexOf('/')+1,frontImage.lastIndexOf('.'));btnClick('灯光',imageName);}elseif(e.data.getTag()==='light1'){//前隧道varfrontImage=e.data.s('front.image');varimageName=frontImage.slice(frontImage.lastIndexOf('/')+1,frontImage.lastIndexOf('.'));btnClick('light1',imageName);}}});互联网+的概念在新兴行业能够很好的运作，同时在传统行业运用得当也能产生巨大的效益，比如智慧城市建设、智慧能源管理、智慧工厂，甚至地铁监管等。.可以结合互联网+模式进行运营，一定程度上节省了大量的人力和时间成本https://hightopo.com/demo/big...https://hightopo。com/demo/int...https://hightopo.com/demo/met...
