TWaver可视化软件(三)数据中心可视化 下

本文是TWaver可视化软件系列的第三篇,内容上承接上一篇,继续介绍数据中心可视化的相关功能。

除了上篇说到的环境、资产、容量以及管线外,数据中心的动环、安防告警、IT运维、巡检等各类业务系统都已经实现了与可视化平台的对接,并实现了数据的可视化处理。

1.动环监控可视化

温湿度可视化

  • 在3D视图中,标识示温湿度传感器的位置,可以按编号搜索传感器,并在3D场景中进行定位,可支持按房间,按区域过滤显示传感器的点位。
  • 对接温湿度数据,实时显示监测点的温湿度值。
  • 对接告警系统,当监测数值到达阈值时,通过染色、告警等方式,在3D视图中直观产生温湿度告警,并能够直接定位到发生告警的对象上。
  • 系统具有温度云图模块,能够将温度传感器传递的数据,形成3D温度云图。
  • 能够通过机柜上的多个温度采集点数据,形成3D机柜热力分布图,进一步形成整体房间的立体温度云图。

在这里插入图片描述

温湿度监控

气流可视化

根据温湿度传感器传递的数据,形成动态的气流组织分布图CFD,能够在3D视图中清晰地看到机房内冷热气流的分布和流向。

在这里插入图片描述

气流可视化

动力系统可视化

基于个性化需求,将系统设备,如机柜、配电柜、UPS、精密空调的实时运行状态和主要参数集成到三维可视化系统中做集中展示。点击设备,可查看设备的相应参数,或者跳转至对应的动力系统界面。

  • 展示UPS监测参数,如各种电压、电流参数,输入、输出频率、有功功率、功率因素等; 展示其状态,如整流器、逆变器、充电器、电池、自动旁路的状态等。
  • 展示配电柜的各种电力参数,如:三相电压、三相电流、频率、有功功率、无功功率、视在功率、功率因数等。
  • 展示精密空调参数如送风/回风温度、湿度;环境温度、湿度;压缩机运行时间;风机运行时间等参数, 以及压缩机、风机、冷凝器、加湿器、除湿器等的运行状态。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一个流行的JavaScript框架,而Twaver.js是一款用于构建数据可视化应用程序的JavaScript库。在Vue中使用Twaver.js可为数据可视化提供更好的支持和更高的扩展性。 Vue中使用Twaver.js,需要包含Twaver.js脚本文件,须先实例化Twaver.DataBox或Twaver.ElementBox对象,用于存储展现的节点、边、连接等元素。Vue组件中可使用ref来获取Twaver组件的引用,使用mounted生命周期钩子初始化数据盒子并创建绘图器,应用渲染策略,指定数据源等。同时,Twaver提供了各类API以便于Vue组件中获取或控制Twaver元素。 如何在Vue中使用Twaver.js?在Vue工程中导入Twaver.js需要在index.html或vue.config.js文件添加以下代码: ``` <!--在index.html中--> <script src="/twaver.js"></script> ``` 或者在vue.config.js如下配置: ``` module.exports = {    configureWebpack: {           externals: {                       "twaver": "Twaver"                    },            plugins: [                  new CopyWebpackPlugin([{                              from: path.resolve(__dirname, "node_modules/twaver"),                  to: "./twaver"              }])                   ]            }    } ``` 在Vue组件中使用Twaver.js的实例化可在mounted里初始化,如下例: ``` <template>   <div>         <div id="twaver"></div>   </div>  </template> <script>   import Twaver from './twaver/Twaver.js';   export default {     name:'twaver-component',     mounted() {         //数据盒子        let dataBox = new Twaver.DataBox();        //创建画布        let network = this.$twaver.createNetwork(dataBox);        //绘制元素        let boxNode = new Twaver.Node();        boxNode.setName("box");        boxNode.setLocation(50,50);        dataBox.add(boxNode);            }   } </script> ``` 如上代码中,在Twaver.DataBox对象中可加入元素,通过this.$twaver.createNetwork方法创建绘图器并绑定到组件,从而可将Twaver可视化数据呈现在Vue组件中。 Vue中Twaver.js的应用有很多细节,比如如何自定义元素、配合Vuex管理元素、通过v-for遍历构建节点、边以及连接等,具体在应用时需要结合Twaver.js的API来进行扩展和实现。不过,通过Twaver.js,Vue可快速实现数据可视化,使界面呈现更加美观、易读,且具备更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值