反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

实例一:大屏模板实例

  • 文档创建者:susie
  • 历史版本:24
  • 最近更新:Carly 于 2022-08-20
  • 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

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

    特例:

    • 间隔背景设计

    1)点击编辑 report0

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

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

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

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

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

    1)单击report6,点击编辑,冻结第 1 行,如下图所示:

    2020-11-04_21-57-51.png

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

    2020-11-04_21-29-27.png

    代码如下:

    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 左为例,如下图所示:

    a2.png

    2)其他边框

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

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

    4.3 效果预览

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

    5. 模板下载

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

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

    附件列表


    主题: 场景应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526