前言
作为企业的发展,通过运营的有效管理,增加收入、降低成本,取得更好的经济效益,是核心所在,在电信企业同样如此。电信企业的利润大体上是由业务收入和成本决定的,而收入和成本又可进一步分别分解表达为不同的形式,其中在每用户平均收入(ARPU)的比对上,可以很清楚地分析出各个时间段的流量对比,并且相应地制定出对策。实现上可以通过 2D 的形式来展示相应的流程,而 Hightopo(以下简称 HT )的 HT for Web 产品上提供了丰富的 2D 组态可帮助我们快速上手,本系统的 ARPU 分析图也是通过 HT 搭建而成。
 
界面简介及效果预览
通过 HT 的 2D 组态矢量图标绘制了三个水池,并且通过管道的水滴动画,串联起了动画流程。
 
代码实现
一、水池动画的实现
矢量图适用于很多场合,其特点是放大后图像不会失真,可以适应不同分辨率的屏幕都不会模糊,不仅可以实现完美的跨平台,在大屏展示上的效果就不言而喻了。而 HT 的 2D 组态上有一套完整的矢量图标,例如系统里所实现的水池,是通过 ht.Default.setImage() 注册一个自定义的矢量图标 pool,而这个矢量图标是通过 comps 定义了几个 type 为 shpe 的自定义图形,我们可以通过 points 和 segments 来定义出想要的效果,而这是对应于 ht.Shape 里的属性,points 是绘制矢量图形的点,而 segments 是描述点连接的样式。通过自定义的方式绘制出矢量图标 pool 后,我们还需要对所需用到的波动移动坐标做数据绑定,方便后续来控制水波的水平移动,对于所需控制的变量我们给它起了一个属性名称 offsetX,对应的是所绘制的 comps 组件里各个自定义图形 shape 所涉及的矩形区域 rect 的横坐标 x。
绘制其中一个自定义矢量图形 shape 的具体实现代码如下:
ht.Default.setImage('pool', {
dataBindings: [
{
attr: 'offsetX',
valueType: 'Number',
defaultValue: 0
}
],
width: 800,
height: 200,
clip: true,
comps: [
{
type: 'shape',
background: 'rgb(51, 153, 255)',
rect: {
func: function(data, view) {
var x = data.a('offsetX') || 0;
return [250 - x, 140, 300, 60];
},
value: [250, 140, 300, 60]
},
points: [250, 148, 290, 163, 333, 140, 421, 148, 510, 157, 550, 150, 550, 150, 550, 200, 250, 200],
segments: [1, 4, 4, 2, 2]
},
...
]
});

绘制成的图形叠加在一起的效果:

水池的水波晃动实现的实质是绘制的各个自定义矢量图形 shape 的横坐标错位平移来达到一种水波的效果,我们可以通过不限定其平移的活动范围来看一下这个原理实现的效果:

很显然对于平移没有边界限定是不行的,通过对于边界限定了一个范围,并在这个范围内定义了一个动画对象 anim,然后通过 HT 的动画函数 ht.Default.startAnim() 来启动这个动画效果:
// 水池晃动动画
updatePoolDeep(pools) {
// 设置每次位置水池晃动波纹偏移的值
let offsetDlt = 2;
// 设置水池晃动波纹动画对象
let anim = {
frames: Infinity,
interval: 50,
action: () => {
pools.each((p) => {
// 设置水池晃动波纹偏移方向
let offsetFlag = p.a('offsetFlag') || 1;
// 根据偏移方向取水池晃动波纹偏移值
let offset = (p.a('offsetX') || 0) + offsetDlt * offsetFlag;
// 对水池晃动波纹限定边界
if (offset > 50) {
offset = 50;
offsetFlag = -1;
} else if (offset < -50) {
offset = -50;
offsetFlag = 1;
}
// 对水池晃动波纹的偏移值和偏移方向进行数据绑定设置值
p.a('offsetX', offset);
p.a('offsetFlag', offsetFlag);
});
}
};
// 开启动画
ht.Default.startAnim(anim);
}
 
为了使水池里面的效果更加地真实一点,我们在矢量图标的上面注册绘制了一张水纹的矢量图片,最后实现的水池晃动效果如下:
 
二、水滴流动效果的实现
在各种行业的业务需求上,2D 视图的流动效果是必不可少的,不仅可以用来表述活动的流程次序,也可以表达出两两互相关联的效果。其实现的方式也多种多样,而本系统是采用自己封装了一个在矩形管道内随机生成水滴的流动效果动画。通过构造一个流动类,类里面定义了基本的一些创建水滴节点、初始化水滴位置以及水滴动画的进行。
对于水滴节点的创建,定义了一个方法:
createNode() {
let node;
// 判断水池中是否有遗留,存在则设定节点为水池删除的最后一个节点
if (this._pool.length) {
node = this._pool.pop();
}
else {
// 创建新的水滴节点
node = new ht.Node();
// 设置水滴图片
node.setImage(WATER_IMG);
}
// 取出流动对应的第一条管道
let firstPath = this.option.paths[0];
// 设置随机的偏移量
let offset = Math.floor(Math.random() * OFFSET_MAX * 2) - OFFSET_MAX;
// 设置水滴的位置
node.p(this.getStartPositon(firstPath.rect, firstPath.orientation, offset));
// 设置水滴的朝向角度
node.setRotation(this.getRotation(firstPath.orientation));
// 设置水滴的数据绑定
node.a({
// 流动管道
pathIndex: 0,
// 动画步进
step: Math.random() * 2 + 3,
// 偏移量
offset: offset
});
return node;
}
流动类里定义了一个设置水滴在规定的矩形 rect 里流动的方法,其参数所表示的意义为:
  • rect:水滴流动的矩形范围;
  • orientation:水滴流动的朝向,TOP | BOTTOM | RIGHT | LEFT;
  • offset:水滴流动的偏移量;
getStartPositon(rect, orientation, offset) {
// 水滴流动的矩形区域 rect 的坐标位置
let { x, y, width, height } = rect;
// 判断水滴朝向位置,并相应地进行位置的偏移
switch (orientation) {
case TOP:
return {
x: x + width / 2 + offset,
y: y + height
};
case RIGHT:
return {
x: x,
y: y + height / 2 + offset
};
case BOTTOM:
return {
x: x + width / 2 + offset,
y: y
};
case LEFT:
return {
x: x + width,
y: y + height / 2 + offset
};
}
}

根据水滴的朝向 orientation,还设置了它的旋转方法:

getRotation(orientation) {
switch (orientation) {
case TOP:
return Math.PI;
case RIGHT:
return - Math.PI / 2;
case BOTTOM:
return 0;
case LEFT:
return Math.PI / 2;
}
}
  
三、图纸叠加的实现
很多场合下,不同于小弹窗的实现,如果需要一个模糊状态的弹窗窗口,我们可以通过叠加一张背景透明的图纸来达到这种效果。
 
 
创建另外一个弹窗图纸的 GraphView 取名为 g2dPop,通过点击事件来渲染加载这张图纸呈现:
 
其实现的监听代码逻辑如下:
// 开启主图纸事件监听
this.g2d.mi(this.handleInteractive, this);
// 开启弹窗图纸事件监听
this.g2dPop.mi(this.popHandleInteractive, this); // 主图纸监听事件
handleInteractive(e) {
const {kind, data} = e;
// 监听事件为点击图元
if (kind === 'clickData') {
// 获取图元标签
let tag = data.getTag();
if (!tag) return;
// 判断图元的标签
if (tag.indexOf('poolClick') >= 0) {
// 反序列化弹窗图纸
ht.Default.xhrLoad('displays/pop.json', json => {
if (!json) return;
this.g2dPopDm.deserialize(json);
});
}
}
} // 弹窗监听事件
popHandleInteractive(e) {
const {kind, data} = e;
// 监听事件为点击图元
if (kind === 'clickData') {
// 获取图元标签
let tag = data.getTag();
if (!tag) return;
// 判断图元的标签
if (tag === 'back') {
// 清除弹窗图纸
this.g2dPopDm.clear();
}
}
}
 
总结
2D 组态上实现的矢量图标可以运用在许多的场合,不仅可以在电信企业表达用户数据流量的水池效果,在很多工业上的工艺流程也可以得以体现,例如 PID-进料系统可视化界面,丰富的 2D 组态可以搭建许多好玩的场景,HT 自身丰富的 2D 组态更是能帮助用户快速上手实现不一样的可视化系统!
2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA
同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

Web 组态运用之用户数据 ARPU 分析图的更多相关文章

  1. iNeuOS工业互联平台,WEB组态(iNeuView)集成图报组件,满足实时数据图形化展示的需求

    目       录 1.      概述... 1 2.      平台演示... 2 3.      应用过程... 3 4.      实时数据展示效果... 5 1.   概述 市场和开源社区有 ...

  2. 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据)

    原文:在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据) 我们都知道,在asp.net中修改 ...

  3. SPRING IN ACTION 第4版笔记-第九章Securing web applications-003-把用户数据存在数据库

    一. 1.It’s quite common for user data to be stored in a relational database, accessed via JDBC . To c ...

  4. 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用

    得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...

  5. iNeuOS工业互联平台,WEB组态(iNeuView)集成rtmp和websocket视频元件,支持海康、大华等摄像头实时显示视频

    目       录 1.      概述... 1 2.      平台演示... 2 3.      硬件摄像头... 2 4.      视频流协议转换管理... 2 5.      组态视频元件 ...

  6. iNeuOS工业互联平台,WEB组态(iNeuView)集成实时预警和报警柱状图

    目       录 1.      概述... 2 2.      平台演示... 2 3.      应用过程... 2 4.      实时数据展示效果... 3  1.      概述 对于我们 ...

  7. iNeuOS工业互联平台,WEB组态(iNeuView)增加工程视图导入、导出功能,及优化和修复,发布:v3.2.1版本

    目       录 1.      概述... 2 2.      平台演示... 2 3.      导出组态工程文件... 2 4.      导入组态工程文件... 3  1.   概述 iNe ...

  8. WEB组态可视化软件(B/S)

    WEB组态可视化软件 目录 WEB组态可视化软件 1 B/S组态软件 2 组态概念 3 组态产品呈现 4 功能特点 5 组态软件应用场景 6 经典的案例 6.1 某通信基站的组态可视化 7 具体实现 ...

  9. iNeuOS工业互联平台,WEB组态(iNeuView)图元和数据点组合及生成新图元复用,实现拖业务

    目       录 1.      概述... 1 2.      平台演示... 2 3.      应用过程... 2 1.   概述 iNeuView视图建模Web组态平台实现图元和数据点组合及 ...

随机推荐

  1. 萌新带你开车上p站(三)

    本文作者:萌新 前情回顾: 萌新带你开车上p站(一) 萌新带你开车上p站(二) 0x08 题目给的提示是和运算符优先级有关 登录后直接看源码 mistake@pwnable:~$ ls flag mi ...

  2. Error: opening registry key 'Software\JavaSoft\Java Runtime Environment' could not find java.dll

    Error: opening registry key 'Software\JavaSoft\Java Runtime Environment'Error: could not find java.d ...

  3. 数据结构和算法(Golang实现)(7)简单入门Golang-标准库

    使用标准库 一.避免重复造轮子 官方提供了很多库给我们用,是封装好的轮子,比如包fmt,我们多次使用它来打印数据. 我们可以查看到其里面的实现: package fmt func Println(a ...

  4. 熬夜整理出来的干货:Python+Pycharm+PyQT5可视化程序设计入门

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:朱淑强 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...

  5. VXLAN 基础教程:在 Linux 上配置 VXLAN 网络

    上篇文章结尾提到 Linux 是支持 VXLAN 的,我们可以使用 Linux 搭建基于 VXLAN 的 overlay 网络,以此来加深对 VXLAN 的理解,毕竟光说不练假把式. 1. 点对点的 ...

  6. [apue] getopt 可能重排参数

    看第21章时,介绍到了解析命令行的神器 getopt,了解了 linux 下处理通用命令行的方法. 命令行可分为参数与选项,其中不带 - 或 -- 前缀的为参数,对一个命令而言数量是固定的,多个参数之 ...

  7. AppBoxFuture: Web在线报表设计与PDF生成

      企业应用需要打印各类单证及报表,为了方便开发此类应用作者在框架内集成了报表引擎,并且实现了基于Canvas的Web在线报表设计及基于PDFJS的报表查看与打印. 一.原理浅析 报表模型:由Xml描 ...

  8. es技术规划

    一.业务背景 es服务当前没有专门的部门负责维护和开发,交由各端自行负责维护,随着公司业务查询和统计需求非常多,会面临居多方面问题和挑战: 无人(专业RD或部门)负责 无专业的人进行维护,遇到问题几乎 ...

  9. js中string转map的方法

    例如: var r = "{'msg':'你好'}" ; var map = eval("("+r+")"); //r为String类型的数 ...

  10. async 和 await 例子

    /// <summary> /// C# 5.0 /// .net framework4.5 /// CLR4.0 /// 引入了async 和 await.这两个关键字可以让你更方便的写 ...