实例一：大屏模板实例

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

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

如下图所示：

3.1 插件安装

安装「扩展图表」插件：扩展图表

• 设计器安装步骤详细请参见 设计器插件管理 

• 服务器安装步骤详细请参见 服务器插件管理 

3.2 材料准备

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

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

素材准备.zip

注：文件中的数据表，需自行使用第三方数据库管理工具导入内置 FRDemo 数据库。

3.3 布局排版

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

1）常见的排版布局请参见 驾驶舱布局。

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

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）为了方便数据设置，在拖放组件时可以将组件、对应的标题组件、数据集及组件形式对应起来，如下表所示：

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

4.1.3 组件设置

图表设计请参见 图表简介 ，报表块设计请参见 单元格样式 。以 chart0 为例：

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

注：由于选的组合地图，所以设置的时候不要遗漏，详细设置请参见 组合地图 

特例：

• 间隔背景设计

1）点击编辑 report0

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

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

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

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

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

1）单击report6，点击编辑，冻结第 1 行，如下图所示：

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

代码如下：

setTimeout(function(){  
        //隐藏报表块report6的滚动条（此报表块名为report6，根据具体情况修改）
    $("div[widgetname=REPORT6]").find("#frozen-north")[0].style.overflow="hidden";  
    $("div[widgetname=REPORT6]").find("#frozen-center")[0].style.overflow="hidden";  
    },100);   
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);  
    //以100ms的速度每次滚动1.5PX  
},1000) 

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

4.2 美化

4.2.1 大屏背景

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

4.2.2 边框元素

1）主标题边框

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

2）其他边框

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

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

4.3 效果预览

保存模板，点击分页预览，效果如描述中所示。

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

点击下载模板及素材：大屏模板示例一.zip