ABI-DEMO解析第六期:智慧能源之电力行业

865
6

wuyingchun 数据达人Lv4

发表于2020-5-29 17:32

楼主
一、页面分析
1、整体简介
主题表:使用rand()函数产生随机数
页面结构:固定分辨率-1366*768
页面一览:
电力.gif

2、模块详解
整体大致结构分为六个模块,具体介绍如下:
第一部分头部标题导航栏整体控制地球组件定位显示,且点击不同省份可刷新对应数据;
第二部分为保电信息的级别显示包括对应的数据信息;
第三部分输电规模的匝数和长度的去年和今年的对比情况;
第四部分是一个自定义地球组件通过点击不同省份来刷新地球的地区显示,且提示框内显示对应的地区名称;
第五部分为输电规模的条形图显示情况;第七部分为输电规模当前的用户数,供电面积以及售电量和电压合格率的情况分析;
第六部分为输电规模的供电可靠率和线损率的显示。
1)头部导航
头部导航栏使用直角按钮组件,组件的组名称对应为地球上面标点,该组件设置点击事件脚本,脚本用来控制其他模块的数据刷新,且定位地球组件的地区,返回按钮配置点击事件,返回为上一级地区信息,脚本(脚本见后文的【脚本说明】)
2.png
该处的参数名称为0时,代表点击该组件后,地球定位的地区为北京市,该地区信息提示框信息也为北京市。
2)保电信息
3.png
使用富文本组件获取取数态表格数据,设置字体大小样式,样式边框为容器属性中的背景图片
3)输电规模占比设计
4.png
该模块通过容器设置背景图片和富文本结合完成,通过调整样式即可,一般富文本取数据为表格id+表元(<#=grid1.d6#>),如果想要获取的是表元的中文值,可以通过(<#=grid1.d6.txt#>)在表元代号的后面添加.txt即可。
4)地球组件
5.png
地球组件拖入进来设置宽高百分比,右上角的提示框信息为一个判断表达式,通过获取导航栏点击传的参数来实现提示框,参数为空,则地球显示全球,否则就获取点击后获取的省份对应的省会;
5)输电规模条形图
条形图使用内置的图表组件,给两个系列的填充色设置渐变色
6.png
6)输电规模用户信息
7.png
该模块为富文本和容器结合,取数后设置不同样式效果,该模块的trunc函数是实现保留两位有效小数,在表格设置的有效小数对设计态的内容不生效
7)输电规模供电特性
8.png
模块使用了饼图调转成环图,环图的颜色占比效果是继承表元的颜色,富文本覆盖在饼图上
9.png


二、脚本说明
地区导航脚本
脚本中定义了event(value)函数,第一段脚本是点击直角按钮控制地图组件的定位脚本,第二段脚本是联动页面其他模块的容器,控制刷新其他模块的数据,达到不同地区展示不同数据的效果;
1、HHH50为地球组件的id;
2、Calc_widget_id后面跟的内容为其他表格容器的id,多个容器id质检用逗号相连,@cs为定义的当前点击的值,将该参数获取的值传到地球组件的提示信息框中;

注意:各个直角按钮的组名为同一个
  1. function eventFunc(value) {
  2.         var id = Number(value);
  3.         if(!g_coolpage.getWidgetById("HHH50"))  EUI.showError("请核对id");
  4.         var earth = g_coolpage.getWidgetById("HHH50").earth;
  5.         if(!earth) return;
  6.         setTimeout(function(){
  7.             earth.chooseArea(id);
  8.                              }, 1000);
  9.    
  10.      calc_Special_Widget(new EUI.Map("calc_widget_id=GRID1,GRID5,HHH24,HHH25,HHH26,HHH27,HHH28,HHH29,HHH32,HHH33,HHH34,HHH35,HHH5,HHH9,HHH10,HHH11,HHH40,HHH41,HHH42,HHH43,HHH44,HHH62,grid6,grid7,grid8,HHH76,HHH77,HHH78,HHH79,HHH84,HHH85,grid9;@cs="+value));
  11. }
复制代码
点击返回按钮脚本
  1. function eventFunc(value) {
  2.     if(!g_coolpage.getWidgetById("HHH50"))  EUI.showError("请核对id");
  3.     var earth = g_coolpage.getWidgetById("HHH50").earth;
  4.     setTimeout(function(){ earth.exitArea(); }, 1000);
  5. }
复制代码

三、配色信息
主标题:#ffffff  15px加粗
模块标题:#ffffff  14px加粗
文字:#ffff91 12px加粗;#15c088 14px 加粗;#ffffff 14px 加粗;
统计图主要填充颜色:绿色:#11EDB0;黑色:#000000;墨绿:#12352C;黄色:#ECFF6A
条形图轴线:#0c382d

四、资源文件

1、报表资源
10.png
说明:.rptttpl后缀文件新建空报表后如下图所示上传
11.png
2、图片资源
直接上传到资源管理器,默认的路径:vfs/root/products/ebi/sys/picture
注意:可以压缩为zip文件后上传。路径不要轻易修改,报表中在引用时使用了文件路径,该文件夹为dianlitu
3、资源文件
6个回答

只看楼主

程序小哥哥 数据达人Lv4

发表于2020-5-29 17:57

只看该作者

取消 关注该作者的回复

沙发

感谢,学习了!

庆余年 数据小白Lv1

发表于2020-5-29 17:58

只看该作者

取消 关注该作者的回复

板凳

终于等来,期待的酷屏!

wut 数据老手Lv5

发表于2020-6-1 09:41

只看该作者

取消 关注该作者的回复

地板

~~~优秀

左岸右转 数据小白Lv1

发表于2020-6-15 18:59

只看该作者

取消 关注该作者的回复

5#

无效组件 截图202006151859319663.png

shendajian 数据小白Lv1

发表于2020-7-20 09:33

只看该作者

取消 关注该作者的回复

6#

貌似少了一张背景切图

辰哥 管理员

发表于2020-7-20 16:40

只看该作者

取消 关注该作者的回复

7#


资源中的组件又正常导入么

登录后可回答问题,请登录注册

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

进群交流、一对一指导

©2020ESENSOFT北京亿信华辰软件有限责任公司版权所有:京ICP备07017321号京公网安备11010802016281号