B/S 工业互联网 地铁行业

2024-08-30 11:08
文章标签 行业 工业 互联网 地铁

本文主要是介绍B/S 工业互联网 地铁行业,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

近几年,互联网与交通运输的融合,改变了交易模式,影响着运输组织和经营方式,改变了运输主体的市场结构、模糊了运营与非营运的界限,也更好的实现了交通资源的集约共享,同时使得更多依靠外力和企业推动交通信息化成为可能。互联网交通具有巨大的潜力、发展迅速、生态浩大,需要政府顺势而为,紧跟发展态势,加强引导、转变职能、创新政府管理与市场监管的模式。而城市轨道交通的投资体量巨大,一条线路动辄上百亿元,如何保证投资效益、提升投资管理工作的精确性和可控性是当务之急。应引入“互联网+”思维,研发基于“互联网+”的城市轨道交通系统。在分析现有投资管理存在问题基础上,这里对该系统的应用特点及主要功能进行了深入阐述,旨在完善提高系统的功能分布和用户体验。

http://www.hightopo.com/demo/metro/demo2.html

代码实现

场景搭建

我们先来搭建基础场景,因为这个场景是在 2D 的基础上实现的,因此我们需要用拓扑组件 ht.graph.GraphView 来搭建基础场景:

dataModel = new ht.DataModel();// 数据容器,用来存储数据节点
graphView = new ht.graph.GraphView(dataModel);// 拓扑组件
graphView.addToDOM();// 将拓扑组件添加到 body 体中

上面代码中出现的 addToDOM 方法将组建添加到 DOM 的 body 中,HT(https://hightopo.com)的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等(均为 HT 的组件)容器中使用,而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中,这里需要注意的是,当父容器大小变化时,如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件,则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素, 则 HT 组件无法获知需要更新,因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件,调用最外层组件 invalidate 函数进行更新。

为了最外层组件加载填充满窗口的方便性,HT 的所有组件都有 addToDOM 函数,其实现逻辑如下,其中 iv 是 invalidate 的简写:

addToDOM = function(){var self = 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 中,常用的一种方法将场景导入到内部就是靠解析 JSON 文件,用 JSON 文件来搭建场景的好处之一就是可以循环利用,我们今天的场景就是利用 JSON 画出来的。接下来 HT 将利用  ht.Default.xhrLoad 函数载入 JSON 场景,并用 HT 封装的 DataModel.deserialize(json) 来反序列化(http://hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html#ref_serialization),并将反序列化的对象加入 DataModel:

ht.Default.xhrLoad('demo2.json', function(text) {var json = ht.Default.parse(text);if(json.title) document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile dataModel.deserialize(json);//反序列化graphView.fitContent(true);//缩放平移拓扑以展示所有图元,即让所有的元素都显示出来
});

在 HT 中,Data 类型对象构造时内部会自动被赋予一个 id 属性,可通过 data.getId() 和 data.setId(id) 获取和设置,Data 对象添加到 DataModel 之后不允许修改 id 值,可通过 dataModel.getDataById(id) 快速查找 Data 对象。但是一般建议 id 属性由 HT 自动分配,用户业务意义的唯一标示可存在 tag 属性上,通过 Data#setTag(tag) 函数允许任意动态改变 tag 值,通过DataModel#getDataByTag(tag) 可查找到对应的 Data 对象,并支持通过 DataModel#removeDataByTag(tag) 删除 Data 对象。我们这边通过在 JSON 中设置 Data 对象的 tag 属性,在代码中通过 dataModel.getDataByTag(tag) 函数来获取该 Data 对象

{"c": "ht.Block","i": 3849,"p": {"displayName": "通风1","tag": "fan1","position": {"x": 491.24174,"y": 320.88985},"width": 62,"height": 62}
}

 

 

var fan1 = dataModel.getDataByTag('fan1');
var fan2 = dataModel.getDataByTag('fan2');
var camera1 = dataModel.getDataByTag('camera1');
var camera2 = dataModel.getDataByTag('camera2');
var camera3 = dataModel.getDataByTag('camera3');
var redAlarm = dataModel.getDataByTag('redAlarm');
var yellowAlarm = dataModel.getDataByTag('yellowAlarm');

 

我在下图中做了各标签对应的元素:

动画

接着我们对需要旋转、闪烁的对象进行设置,HT 中对“旋转”封装了 setRotation(rotation) 函数,通过获得对象当前的旋转角度,在这个角度的基础上再增加某个弧度,通过 setInterval 定时调用,这样就能在一定的时间间隔内旋转相同的弧度:

setInterval(function(){var time = new Date().getTime();var deltaTime = time - lastTime;var deltaRotation = deltaTime * Math.PI / 180 * 0.1;lastTime = time;fan1.setRotation(fan1.getRotation() + deltaRotation*3);fan2.setRotation(fan2.getRotation() + deltaRotation*3);camera1.setRotation(camera1.getRotation() + deltaRotation/3);camera2.setRotation(camera2.getRotation() + deltaRotation/3);camera3.setRotation(camera3.getRotation() + deltaRotation/3);if (time - stairTime > 500) {stairIndex--;if (stairIndex < 0) {stairIndex = 8;}stairTime = time;}for (var i = 0; i < 8; i++) {// 因为有一些相似的元素我们设置的 tag 名类似,只是在后面换成了1、2、3,所以我们通过 for 循环来获取var color = stairIndex === i ? '#F6A623' : '#CFCFCF';dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);}if (new Date().getSeconds() % 2 === 1) {yellowAlarm.s('shape.background', null);redAlarm.s('shape.background', null);}else {yellowAlarm.s('shape.background', 'yellow');redAlarm.s('shape.background', 'red');}
}, 5);

 

当然还是可以通过 HT 封装的动画进行操作,不过这里不一次性投食太多,有兴趣的可以看看我发布的 https://www.cnblogs.com/xhload3d/p/9222549.html 等其它文章。

HT 还封装了 setStyle 函数用来设置样式,可简写为 s,具体样式请参考 HT for Web 样式手册(http://hightopo.com/guide/guide/core/theme/ht-theme-guide.html):

for (var i = 0; i < 8; i++) {// 因为有一些相似的元素我们设置的 tag 名类似,只是在后面换成了1、2、3,所以我们通过 for 循环来获取var color = stairIndex === i ? '#F6A623' : '#CFCFCF';dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
}

 我们还对“警告灯”的闪烁进行了定时控制,如果是偶数秒的时候,就将灯的背景颜色设置为“无色”,否则,如果是 yellowAlarm 则设置为“黄色”,如果是 redAlarm 则设置为“红色”:

if (new Date().getSeconds() % 2 === 1) {yellowAlarm.s('shape.background', null);redAlarm.s('shape.background', null);
}
else {yellowAlarm.s('shape.background', 'yellow');redAlarm.s('shape.background', 'red');
}

 

 

总结

2015 年 3 月,李克强总理在政府工作报告中首次提出“互联网+”行动计划。之后,国务院印发《关于积极推进“互联网+”行动的指导意见》,推动互联网由消费领域向生产领域拓展,从而进一步提升产业发展水平,增强行业创新能力。在此“互联网+”的背景之下,城市轨道交通行业应当紧跟时代潮流,将“互联网+”思维引入工程投资管理之中,研发一种基于“互联网+”的城市轨道交通工程投资管理系统,从而提升造价管理系统的功能分布和用户体验。“互联网+”通过行业跨界,寻找互联网与城市轨道交通工程的相关性,将传统行业的数据进行信息化处理,将原本有限的数据进行提升、分析和流转,利于“互联网+”的乘数效应,显著提升工程投资管理中数据的实时动态和完整精确。

 

https://hightopo.com/demo/metro/demo1.html

https://hightopo.com/demo/large-screen/index.html

这篇关于B/S 工业互联网 地铁行业的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120650

相关文章

AI行业应用(不定期更新)

ChatPDF 可以让你上传一个 PDF 文件,然后针对这个 PDF 进行小结和提问。你可以把各种各样你要研究的分析报告交给它,快速获取到想要知道的信息。https://www.chatpdf.com/

国产游戏行业的崛起与挑战:技术创新引领未来

国产游戏行业的崛起与挑战:技术创新引领未来 近年来,国产游戏行业蓬勃发展,技术水平不断提升,许多优秀作品在国际市场上崭露头角。从画面渲染到物理引擎,从AI技术到服务器架构,国产游戏已实现质的飞跃。然而,面对全球游戏市场的激烈竞争,国产游戏技术仍然面临诸多挑战。本文将探讨这些挑战,并展望未来的机遇,深入分析IT技术的创新将如何推动行业发展。 国产游戏技术现状 国产游戏在画面渲染、物理引擎、AI

【IT】软件行业发展的前瞻性和希望的广度

我说一下我对程序应用的一个看法就是 我其实个人不太建议自动驾驶技术的发展因为这个东西它说到底还是什么那么一点安全隐患 ,虽然我们平常考虑用同时实行各种各样的高级的自动作用, 但是自动驾驶可能是个特例,其实我个人觉得程序可以在以下方面发展 1.医学(包括诊断 治疗 手术等)因为现在也有很多的疾病是医学还没有能力去解决的 ,2.国防 有的时候因为国家安全真的非常重要的,因为我们每个人

提升PrestaShop外贸电商网站安全的几款行业必备工具

提升PrestaShop外贸电商网站安全的几款行业必备工具 PrestaShop发展历程 PrestaShop是一款优秀且强大的外贸开源电商软件,我们开始使用PrestaShop始于2009年,那时PrestaShop还是0.9版本:界面清新,性能强悍,扩展友好等特性,既没有Magento的笨重,也没有ZenCart的古老,更没有OpenCart的脆弱,因此PrestaShop如雨后春笋,迅速

AI 与大模型:物流行业的变革力量

一、物流行业的现状与挑战 物流行业在现代经济中扮演着至关重要的角色,但目前也面临着诸多挑战。 在效率方面,交通拥堵是一个突出问题。许多城市道路容量不足,无法满足日益增长的货物运输需求,导致运输时间延长。例如,在一些大城市,货物运输常常因交通拥堵而延迟,影响了整个供应链的效率。此外,信息不对称也严重影响了物流效率。供应商和购买方之间缺乏实时信息共享平台,双方无法准确了解货物的到达时间、配送状

安科瑞ASJ漏电流继电器在轨道交通地铁车站配电系统中的应用

应用背景 城市轨道交通设备门类复杂、数量庞大、分布广泛,在长期连续运行时存在火灾隐患。在国内外的地铁火灾中,因电气原因引起的火灾占比最大,达到37%,其中供电线路的漏电流更是造成电气火灾的重要因素。消防部门、行业专家往往要求地铁车站设置电气火灾监控系统,但在地铁监控防范措施中,泄漏电流的监测并不完善,现有的泄漏电流监测系统存在误报现象,使得配电系统漏电保护 频繁跳闸。为此,查找频繁误报警原因,采

互联网开发要点

垂直扩展 横向扩展 业务分拆 数据读写分离 缓存读写 异步处理(消息队列)

车险该怎么买?行业人讲解车险

很多车主对汽车保险知识不了解,稀里糊涂的买了车辆保险,但是出险时发现很多不赔的,还有很多对自己来说没什么用的保险,花了不少钱,还没买到自己想要的,殊不知只要多了解点汽车保险知识就能轻松省下一大笔钱并且买到自己真正想要的,何乐而不为呢! 因为卖保险的或者4S店,都是按照常规情况给你推荐保险,具体用车情况,只有你自己最清楚,所以保险是个个性化定制的产品,需要什么买什么,不需要的就没必要购买了。 一般

HTML5如何成为改变移动互联网幕后的推手

在未来的某一天,我们打开手机,不再需要访问手机应用商店,不论是 Apple的还是Google的,我们只需要点击手机主菜单页面上的一个链接,手机就会立即在它的浏览器上启动一个 “应用程序”;再也不需要flash插件,就能欣赏华丽丽视频画面。   AD:2013云计算架构师峰会课程资料下载   2012年,说HTML5集千宠万爱于一身也毫不夸张,IE、Chrome、Firefox和Opera等

变压器制造5G智能工厂工业物联数字孪生平台,推进制造业数字化转型

变压器制造5G智能工厂工业物联数字孪生平台,推进制造业数字化转型。作为传统制造业的重要组成部分,变压器制造行业也不例外地踏上了数字化转型的快车道。而变压器制造5G智能工厂物联数字孪生平台的出现,更是为这一进程注入了强大的动力,不仅极大地提升了生产效率,还推动了整个行业的智能化、精细化发展。 5G智能工厂,是基于5G通信技术和物联网(IoT)的深度融合而构建的智能制造体系。它利用5G网络的高速度、