历史版本18 :实例一:大屏模板实例 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 版本编辑

报表设计器版本
JAR 包
10.02017-12-15

2. 描述编辑

应用场景:当需要从一大堆数据里提取出有用的数据,同时需要一眼就清晰明了的了解这些数据并做出准确的判断时,可以通过可视化大屏来完成。

功能介绍:将需要用到的信息根据一定的逻辑排布在同一界面上展示,帮助用户进一步分析各数据之间的关系。

如下图所示:

osEHOYbkXI.gif

3. 准备工作编辑

3.1 插件安装

安装「扩展图表」插件:

3.2 材料准备

确定需求,准备好数据库表、背景图片、边框元素

此文档模板所需的材料请点击下载:

素材准备.zip

注:文件中的数据表,需使用第三方软件(可点击安装:navicat premium 软件 )导入内置 FRDemo 数据库。

3.3 布局排版

根据实际需求,确定大屏的主要信息和对应的展示形式,以及其他需要的次要信息和展示形式。

1)常见的排版布局请参见 如何制作一个大屏模板(实例)。

2)此文档是用地图组件和其余六个组件进行一个逻辑上联系的一个排版布局,如下图所示的:

image.png

4. 操作步骤编辑

4.1 模板制作

新建一个决策报表,详细步骤请参见 决策报表入门示例 。

4.1.1 新建数据集

新建模板数据集如下:

ds1:SELECT pid,销售额,${INT(RAND()*100000)}+销售额 AS 新销售额 FROM 地图 WHERE pid IS NOT NULL AND pid NOT IN('天津市') ORDER BY RANDOM() LIMIT 5

ds2:SELECT * FROM 地图

ds3:SELECT * FROM 新老用户对比

ds4:SELECT * FROM 保费地区排名

ds5:SELECT * FROM 表单联动柱形图

ds6:SELECT * FROM 地区保费构成

ds7:SELECT * FROM 年度累计总保费

ds8:SELECT * FROM 热销产品

ds9:SELECT * FROM 销售数据地图

ds10:SELECT * FROM 增长折线

ds11:SELECT * FROM 最新交易数据

4.1.2 组件拖放

1)为了方便数据设置,在拖放组件时可以将组件、对应的标题组件、数据集及组件形式对应起来,如下表所示:

控件名标题组件数据集组件形式
report0report 标题
报表块
chart0
ds1、ds2地图
chart1report1 标ds4柱形图
chart2report2 标ds6饼图
chart3report3 标ds8条形图
report4report4 标ds7报表块
chart5report5 标ds3饼图
report6report6 标ds11报表块

2)根据布局排版将所有组件按照上表顺序拖放到对应位置,如下图所示:

a1.png

4.1.3 组件设置

图表设计请参见 [新]图表 ,报表块设计请参见 单元格样式 。以 chart0 为例:

1)拖入「地图」图表,点击编辑,设置类型、数据、样式、特效,如下图所示:

23.png

注:由于选的组合地图,所以设置的时候不要遗漏,详细设置请参见 [新]组合地图

特例:

  • 间隔背景设计

点击编辑 report0

在 A2 单元格输入公式:RANDBETWEEN(123451111, 123459999)

在 B2 单元格输入公式:SPLIT(A2, "")

设置 B2 单元格扩展为「横向扩展」,背景为蓝色

C2 设计为空格,左父格为 B2,详细请参见 大屏FAQ 。

  • report6 报表块实现跑马灯效果

单击 report6 ,选择事件>添加事件>编辑初始化后1,输入代码,如下图所示:

公式3.png

代码如下:

setTimeout(function(){  
    $("div[widgetname=REPORT6]").find("#frozen-north")[0].style.overflow="hidden";  
    $("div[widgetname=REPORT6]").find("#frozen-center")[0].style.overflow="hidden";  
    },100);  
    //隐藏报表块report0的滚动条  
window.flag=true;  
setTimeout(function(){     
$("#frozen-center").mouseover(function()    
{    
  window.flag=false;    
  })  
  //鼠标悬停,滚动停止  
$("#frozen-center").mouseleave(function()    
{    
  window.flag=true;    
  })    
  //鼠标离开,继续滚动  
var old=-1;     
var interval=setInterval(function()    
{  
if(window.flag){  
   currentpos=$("#frozen-center")[0].scrollTop;    
   if (currentpos==old){  
    $("#frozen-center")[0].scrollTop=0;  
     }    
   else {    
      old=currentpos;    
      $("#frozen-center")[0].scrollTop=currentpos+1.5;    
        }    
      }  
    },100);  
    //以25ms的速度每次滚动3.5PX  
},1000) 

注:详细设计请参见 报表块实现跑马灯效果

4.2 美化

4.2.1 大屏背景

大屏背景此处用的是素材里的主题背景.jpg,具体设置请参见 轮播时自动联动其他组件

4.2.2 边框元素

1)主标题边框

report 标题两侧拖入报表块,并设置控件属性中的样式,以report 左为例,如下图所示:

a2.png

2)其他边框

其他边框不需要再另外添加组件,直接设置属性即可,详细操作请参见4.2.2 边框元素

此模板标题边框用的是标题背景带渐变框.png,其他用的是边框元素.png

5 预览效果编辑

保存模板,选择分页预览,效果如描述中所示。

6. 已完成模板编辑

已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\大屏模板示例一.frm

大屏展示示例一.zip