{"meta":{"id":"https:\/\/api.iclient.ifeng.com\/ipadtestdoc?aid=ucms_7x8WbPQ6z9B","type":"doc","o":"1","documentId":"ucms_7x8WbPQ6z9B"},"body":{"newStatus":"1","documentId":"ucms_7x8WbPQ6z9B","staticId":"ucms_7x8WbPQ6z9B","title":"能源行业可视化大屏模板如何做?内附精美大屏模板","shareTitle":"能源行业可视化大屏模板如何做?内附精美大屏模板","thumbnail":"http:\/\/d.ifengimg.com\/w150_h106_q100\/x0.ifengimg.com\/res\/2020\/1EFB16753F642E6821953D41D3C57C0C0FF9D9AB_size1955_w1862_h839.png","source":"数据前线","author":"","editorcode":"weMedia","editTime":"2020-06-10 17:40:52","updateTime":"2020\/06\/10 17:40:52","wapurl":"http:\/\/\/\/feng.ifeng.com\/c\/7x8WbPQ6z9B","introduction":"","wwwurl":"http:\/\/\/\/feng.ifeng.com\/c\/7x8WbPQ6z9B","commentsUrl":"ucms_7x8WbPQ6z9B","commentCount":0,"text":"
大屏可视化已广泛应用于能源行业实现数据融合、数据展示、数据分析、数据监测指挥等多种功能,可广泛应用于监测指挥、分析研判展示汇报等场景<\/p>
下面利用亿信ABI做一期能源行业可视化大屏模板<\/p>
一、页面分析<\/p>
1、整体简介<\/p>
主题表:使用rand()函数产生随机数<\/p>
页面结构:固定分辨率-1366*768<\/p>
页面一览:<\/p>
<\/p>
2、模块详解<\/p>
整体大致结构分为六个模块,具体介绍如下:<\/p>
第一部分头部标题导航栏整体控制地球组件定位显示,且点击不同省份可刷新对应数据;<\/p>
第二部分为保电信息的级别显示包括对应的数据信息;<\/p>
第三部分输电规模的匝数和长度的去年和今年的对比情况;<\/p>
第四部分是一个自定义地球组件通过点击不同省份来刷新地球的地区显示,且提示框内显示对应的地区名称;<\/p>
第五部分为输电规模的条形图显示情况;第七部分为输电规模当前的用户数,供电面积以及售电量和电压合格率的情况分析;<\/p>
第六部分为输电规模的供电可靠率和线损率的显示。<\/p>
1)头部导航<\/p>
头部导航栏使用直角按钮组件,组件的组名称对应为地球上面标点,该组件设置点击事件脚本,脚本用来控制其他模块的数据刷新,且定位地球组件的地区,返回按钮配置点击事件,返回为上一级地区信息,脚本(脚本见后文的【脚本说明】)<\/p>
<\/p>
该处的参数名称为0时,代表点击该组件后,地球定位的地区为北京市,该地区信息提示框信息也为北京市。<\/p>
2)保电信息<\/p>
<\/p>
使用富文本组件获取取数态表格数据,设置字体大小样式,样式边框为容器属性中的背景图片<\/p>
3)输电规模占比设计<\/p>
<\/p>
该模块通过容器设置背景图片和富文本结合完成,通过调整样式即可,一般富文本取数据为表格id+表元(<#=grid1.d6#>),如果想要获取的是表元的中文值,可以通过(<#=grid1.d6.txt#>)在表元代号的后面添加.txt即可。<\/p>
4)地球组件<\/p>
<\/p>
地球组件拖入进来设置宽高百分比,右上角的提示框信息为一个判断表达式,通过获取导航栏点击传的参数来实现提示框,参数为空,则地球显示全球,否则就获取点击后获取的省份对应的省会;<\/p>
5)输电规模条形图<\/p>
条形图使用内置的图表组件,给两个系列的填充色设置渐变色<\/p>
<\/p>
6)输电规模用户信息<\/p>
<\/p>
该模块为富文本和容器结合,取数后设置不同样式效果,该模块的trunc函数是实现保留两位有效小数,在表格设置的有效小数对设计态的内容不生效<\/p>
7)输电规模供电特性<\/p>
<\/p>
模块使用了饼图调转成环图,环图的颜色占比效果是继承表元的颜色,富文本覆盖在饼图上<\/p>
<\/p>
二、脚本说明<\/p>
地区导航脚本<\/p>
脚本中定义了event(value)函数,第一段脚本是点击直角按钮控制地图组件的定位脚本,第二段脚本是联动页面其他模块的容器,控制刷新其他模块的数据,达到不同地区展示不同数据的效果;<\/p>
1、HHH50为地球组件的id;<\/p>
2、Calc_widget_id后面跟的内容为其他表格容器的id,多个容器id质检用逗号相连,@cs为定义的当前点击的值,将该参数获取的值传到地球组件的提示信息框中;<\/p>
注意:各个直角按钮的组名为同一个<\/p>
function eventFunc(value) {<\/p>
var id = Number(value);<\/p>
if(!g_coolpage.getWidgetById("HHH50")) EUI.showError("请核对id");<\/p>
var earth = g_coolpage.getWidgetById("HHH50").earth;<\/p>
if(!earth) return;<\/p>
setTimeout(function(){<\/p>
earth.chooseArea(id);<\/p>
}, 1000);<\/p>
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));<\/p>
}<\/p>
复制代码<\/p>
点击返回按钮脚本<\/p>
function eventFunc(value) {<\/p>
if(!g_coolpage.getWidgetById("HHH50")) EUI.showError("请核对id");<\/p>
var earth = g_coolpage.getWidgetById("HHH50").earth;<\/p>
setTimeout(function(){ earth.exitArea(); }, 1000);<\/p>
}<\/p>
复制代码<\/p>
三、配色信息<\/p>
主标题:#ffffff 15px加粗<\/p>
模块:标题:#ffffff 14px加粗<\/p>
文字:#ffff91 12px加粗;#15c088 14px 加粗;#ffffff 14px 加粗;<\/p>
统计图主要填充颜色:绿色:#11EDB0;黑色:#000000;墨绿:#12352C;黄色:#ECFF6A<\/p>
条形图轴线:#0c382d;<\/p>
四、资源文件<\/p>
1、报表资源<\/p>
<\/p>
说明:.rptttpl后缀文件新建空报表后如下图所示上传<\/p>
<\/p>
2、图片资源<\/p>
直接上传到资源管理器,默认的路径:vfs\/root\/products\/ebi\/sys\/picture<\/p>
注意:可以压缩为zip文件后上传。路径不要轻易修改,报表中在引用时使用了文件路径,该文件夹为dianlitu<\/p>
今天给大家分享能源行业大屏模板用酷屏制作,内含多个自定义组件从页面解析、特效到脚本实现所有资源免费送下载资源即可使用。不论你从事哪一种行业每一种行业模板,都可以复用模板的文字、图表、数据都可任意调整,完全可以成为你自己的。<\/p>
从页面解析、特效到脚本实现重要的是所有资源免 费 送,模版下载地址和制作方式,在亿信社区搜索 智慧能源之电力行业 就能找到。<\/p>","img":[{"url":"https:\/\/x0.ifengimg.com\/res\/2020\/6AB6898DFB82EB10D3F7EE0D7774B79B034D04C7_size1268_w1359_h765.gif","size":{"width":"1359","height":"765"},"resizedImg":"http:\/\/d.ifengimg.com\/mw640_q100_ext\/x0.ifengimg.com\/res\/2020\/6AB6898DFB82EB10D3F7EE0D7774B79B034D04C7_size1268_w1359_h765.gif"},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/1EFB16753F642E6821953D41D3C57C0C0FF9D9AB_size1955_w1862_h839.png","size":{"width":"640","height":"288"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/CA0659C49D729E511A4F050947379A731D1C86B9_size168_w363_h390.png","size":{"width":"363","height":"390"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/48C5B6ABD5D37CC5305F703AB372DCD7A2C44E92_size164_w333_h378.png","size":{"width":"333","height":"378"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/A603C2B67499A75C910FB4F01CC4E1DD4DB489FC_size685_w870_h486.png","size":{"width":"640","height":"357"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/373C026E38D6D1DAA5748807AA9766DD9BF5D008_size44_w1035_h508.png","size":{"width":"640","height":"314"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/B73909705E63BB24D9B960C32F5359D973904587_size169_w350_h385.png","size":{"width":"350","height":"385"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/0D3033A7CA961E3D9111280A1B5192803F6A6E8F_size108_w288_h311.png","size":{"width":"288","height":"311"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/D0EF8F77BBE9B9927D1210F3F635081775A19276_size50_w1030_h510.png","size":{"width":"640","height":"316"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/FB407D6709EFA69E9ABC7805B2DB370BCE1709BD_size9_w793_h184.png","size":{"width":"640","height":"148"}},{"url":"http:\/\/d.ifengimg.com\/mw640_q100\/x0.ifengimg.com\/res\/2020\/A4C42D8A17285B41F33E67C0995999F6DEC839DF_size42_w497_h234.png","size":{"width":"497","height":"234"}}],"summary":"大屏可视化已广泛应用于能源行业实现数据融合、数据展示、数据分析、数据监测指挥等多种功能,可广泛应用于监测指挥、分析研判展示汇报等场景下面利用亿信ABI做一期能源","sharesummary":"大屏可视化已广泛应用于能源行业实现数据融合、数据展示、数据分析、数据监测指挥等多种功能,可广泛应用于监测指挥、分析研判展示汇报等场景下面利用亿信ABI做一期能源","commentType":"0","wemediaEAccountId":"1147862","showclient":"0","shareurl":"https:\/\/ishare.ifeng.com\/c\/s\/v00262XcgKfaFs--F5YKjhqqdIf8lcQ--NA6IcedR-_xYM2wj4__","praise":"1","like_num":"1"}}