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

复制链接 | 收藏本帖

9389

楼主

一、页面分析
1、整体简介

主题表：使用rand()函数产生随机数

页面结构：固定分辨率-1366*768

页面一览：

2、模块详解

整体大致结构分为六个模块，具体介绍如下：

第一部分头部标题导航栏整体控制地球组件定位显示，且点击不同省份可刷新对应数据；

第二部分为保电信息的级别显示包括对应的数据信息；

第三部分输电规模的匝数和长度的去年和今年的对比情况；

第四部分是一个自定义地球组件通过点击不同省份来刷新地球的地区显示，且提示框内显示对应的地区名称；

第五部分为输电规模的条形图显示情况；第七部分为输电规模当前的用户数，供电面积以及售电量和电压合格率的情况分析；

第六部分为输电规模的供电可靠率和线损率的显示。

1）头部导航

头部导航栏使用直角按钮组件，组件的组名称对应为地球上面标点，该组件设置点击事件脚本，脚本用来控制其他模块的数据刷新，且定位地球组件的地区，返回按钮配置点击事件，返回为上一级地区信息，脚本（脚本见后文的【脚本说明】）

该处的参数名称为0时，代表点击该组件后，地球定位的地区为北京市，该地区信息提示框信息也为北京市。

2）保电信息

使用富文本组件获取取数态表格数据，设置字体大小样式，样式边框为容器属性中的背景图片

3）输电规模占比设计

该模块通过容器设置背景图片和富文本结合完成，通过调整样式即可，一般富文本取数据为表格id+表元（<#=grid1.d6#>），如果想要获取的是表元的中文值，可以通过（<#=grid1.d6.txt#>）在表元代号的后面添加.txt即可。

4）地球组件

地球组件拖入进来设置宽高百分比，右上角的提示框信息为一个判断表达式，通过获取导航栏点击传的参数来实现提示框，参数为空，则地球显示全球，否则就获取点击后获取的省份对应的省会；

5）输电规模条形图

条形图使用内置的图表组件，给两个系列的填充色设置渐变色

6）输电规模用户信息

该模块为富文本和容器结合，取数后设置不同样式效果，该模块的trunc函数是实现保留两位有效小数，在表格设置的有效小数对设计态的内容不生效

7）输电规模供电特性

模块使用了饼图调转成环图，环图的颜色占比效果是继承表元的颜色，富文本覆盖在饼图上

二、脚本说明

地区导航脚本

脚本中定义了event(value)函数，第一段脚本是点击直角按钮控制地图组件的定位脚本，第二段脚本是联动页面其他模块的容器，控制刷新其他模块的数据，达到不同地区展示不同数据的效果；

1、HHH50为地球组件的id;

2、Calc_widget_id后面跟的内容为其他表格容器的id，多个容器id质检用逗号相连，@cs为定义的当前点击的值，将该参数获取的值传到地球组件的提示信息框中；

注意：各个直角按钮的组名为同一个

function eventFunc(value) {
var id = Number(value);
if(!g_coolpage.getWidgetById("HHH50")) EUI.showError("请核对id");
var earth = g_coolpage.getWidgetById("HHH50").earth;
if(!earth) return;
setTimeout(function(){
earth.chooseArea(id);
}, 1000);
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));
}