互联网+为隧道产业带来的机遇
现在互联网+时代来，让咱们这些做隧道的也看到了转型的机会。利用大数据和信息流的优势，给隧道产业带来更广阔的发展空间。所以，我们做隧道的也要多学习新技术，多交流经验才行。把互联网的好东西都搬过来，给我们的隧道产业加点智慧buff，让它飞速往前跑！
在工程建设方面，经常遇到信息不对称和管理有难度的问题。尤其是在山区动辄爬山越岭的情况下，不少人可能就会感到绝望。但是有了互联网+的新功能——视频监控图像和声音录音系统，这些问题都变得轻松多了。这个系统能实时观察各个工地上的动态，还能够第一时间发现并解决问题，使得整个工程更高效地运转起来。
dm = new ht.DataModel();// 数据容器，可以将显示在界面上的所有数据通过 dataModel.add 存储在数据容器中 g3d = new ht.graph3d.Graph3dView(dm);// 3D 组件 g3d.addToDOM();// 将 3D 组件的底层 p 添加到 body 中
HTML5结合互联网+实现3D隧道
HTML5挺给力的，特别是做3D隧道那块儿。首先得搞出个3D画面，HTML5里的HT（）就是干这个的，能帮你创造三维场景。举个例子，你想让图形3D视图展示特定位置，就启动 Graph3dView实例，再找到里面的p元素，搞定！不过用了BorderPane、 SplitView和 TabView这些大碗大盆的容器后，别忘了调整它们的大小，否则会对HT组件产生影响。
addToDOM = function(){
var self = this,
view = self.getView(),// 获取组件的底层 p
style = view.style;
document.body.appendChild(view);// 将组件的底层 p 添加进 body 中
style.left = '0';// HT 组件默认设置 position 样式属性为 absolute 绝对定位方式
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);
}
外头那个HT部件得咱们自己动手把底下的p元素弄进网页的DOM里，还能在窗口变大了或小了的时候自动更新。用上HT的addToDOM功能，就能让网页塞满整个窗口！而且，我们用HT.Default.xhrLoad函数读取json文件的场景，方便搞开发的人跟设计师分开干活儿，真是大大提升了工作速度！
ht.Default.xhrLoad('scenes/隧道.json', function(text){// 加载 json 场景
var json = ht.Default.parse(text);// 转义 json 文件
dm.deserialize(json);// 将 json 内容反序列化到场景中
// 可以在这个里面任意操作 datamodel 数据容器中的数据了
}
动画操作与数据控制
想做出好的3D交互界面，就得学会让物体动起来。就像装点儿小车跑起来，用dataModel里面的 addScheduleTask(task)试试看，json格式的文件里都包着这些属性。除了小动作，还能别出心裁地改变元素样式，比如在表格上倒计时什么的。
表单设计与交互
var task = {
action: function(data){
if(!data.getTag()) return;
var tag = data.getTag();// 获取图元的 tag 属性
if(tag === 'feng'){
data.r3(0, (data.r3()[1]+Math.PI/12), 0);// r3 为 3d 中的旋转，这里 y 轴在原来的基础上再旋转 Math.PI/12 角度
}else if(tag === 'feng2'){
data.r3(0, 0, data.r3()[2]+Math.PI/12);
}else if(tag === 'door'){
if(data.getTall() > 0){// 获取图元的 tall 属性，高度
data.setTall(data.getTall()-20);// 设置高度为当前高度减去20
}
}
}
}
dm.addScheduleTask(task);// 在数据容器 dataModel 中添加调度任务
设计3D隧道中的表单就像盖房子一样重要，得好好琢磨文本、图标和按钮等元素怎么安排能让用户看得舒服。点了按钮就能启动 btnClick 函数做出反应，点击事件翻转交通灯颜色，这个过程就像是在玩游戏一样有趣。
总结与展望
用HTML5加上互联网+做个3D隧道模拟，这对整个隧道行业的数字化转型有很大帮助。有了视频监控、动画控制和表格设计这些功能，隧道施工就能找到新的办法。以后科技越来越先进，这类利用互联网+进行智能化管理的方法肯定会被更多地方采纳。
这篇文章希望能给大家带来点想法，对于工作中涉及到这些的小伙伴们也有点借鉴作用！现在科技发展太快了，我们得不停地学新东西，才能跟得上社会的节奏，应对未来可能出现的问题。
form.addRow([// addRow 添加一行 我这个部分是添加一个标题
{
element: '交通灯控制',// 这一行第一部分的显示文本
align: 'center',// 文本对齐方式
color: 'rgb(0,210,187)',// 文本颜色
font: 'bold 16px arial, sans-serif'// 文本字体
}
], [0.1]);// 记得要设置这行的宽度
form.addRow([ // 这行中有两个部分，一个“设备描述”，一个 文本“0”，所以要设置两个宽度，宽度要放在一个数组中
'设备描述:',// 第一部分
{// 第二部分
element: '0',
color: 'rgb(0,210,187)'
}
],[80, 0.1], 34);// addRow 函数第二个参数为宽度设置，将上面内容的宽度依次放进这个数组中。第三个参数为高度
form.addRow([
'当前状态:',
{// 也可以将数组中的某个部分设置为空字符串，占据一些宽度，这样比例比较好调
element: ''
},
{
id: '105',// id唯一标示属性，可通过formPane.getItemById(id)获取添加到对应的item对象
button: {/ /按钮，设置了该属性后HT将根据属性值自动构建ht.widget.Button对象，并保存在element属性上
icon: 'symbols/隧道用图标/light.json',// 按钮上的显示图标
background: '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([
'修改状态:',
{
element: ''
},
{
button: {
icon: 'symbols/隧道用图标/light.json',// 设置按钮的图标
background: 'rgba(0,7,26,0.60)',
borderColor: 'rgb(0, 7, 26)',
groupId: 'btn',// 通过getGroupId和setGroupId获取和设置组编号，属于同组的togglable按钮具有互斥功能。后面的三个按钮也是设置了同一个 groupId
onClicked: function(e){// 点击后的回调函数
btnClick('light');
}
}
}
],[80, 0.1, 84], 30);
background: url('assets/控制.png') no-repeat;
。
评论0