决策报表新自适应_JS使用

  • 文档创建者:用户3pBiH8835
  • 编辑次数:24次
  • 最近更新:用户3pBiH8835 于 2020-12-04
  • 1. 概述

    安装决策报表新自适应插件后,决策报表JS的新接口方法以及支持情况见下文所述,同时对新自适应自定义JS接口设计方法进行说明。

    注:下文中的所涉及到的决策报表JS可能存在遗漏的情况,如在模板制作中遇到未覆盖的决策报表JS,可联系技术支持或开发人员。

    2.采用新接口方法的决策报表JS

    安装决策报表新自适应插件后,由于新自适应的前端采用新的canvas进行绘制实现,不同于老自适应的渲染方式,部分决策报表JS使用新接口写法。

    2.1 JS点击超链切换TAB页

    参考文档:JS实现点击超链切换TAB页

    新接口写法,见下:

    _g().getWidgetByName("tabpane0").showCardByIndex(1);

    2.2JS隐藏报表块滚动条

    参考文档:JS隐藏报表块滚动条

    新接口写法,见下:

    setTimeout(function(){ _g().getWidgetByName('report0').setVScrollBarVisible(false); }, 100)

    2.3报表块实现跑马灯效果

    参考文档:报表块实现跑马灯效果

    在报表块中添加初始化事件,见下:

    _g().getWidgetByName('report0').startMarquee(
    { offset: 2, 
    interval: 0.02, 
    to: 'right' 
    })

    说明:

    startMarquee(opt)

    opt可以传以下4个属性。

    1.offset:每次滚动的距离,默认为5

    2.interval:时间间隔(单位为秒),默认为0.1

    3.stopOnHover:鼠标悬浮时暂停,默认为true

    4.to:可以设置报表块的滚动方向,默认为top

    top:向上滚动

    bottom:向下滚动

    left:向左滚动

    right:向右滚动

    其他效果:

    如果想实现鼠标悬停,让多个报表块停止滚动,可在body中添加初始化事件,见下:

    setTimeout(() => {
        _g().getWidgetByName('report0_c').setVScrollBarVisible(false);
    _g().getWidgetByName('report0_c_c').setVScrollBarVisible(false);
    function start(){
        _g().getWidgetByName("report0_c").startMarquee(
            {
                offset: 2,
                interval: 0.02,
                to: 'top'
            }
        );
        _g().getWidgetByName("report0_c_c").startMarquee(
            {
                offset: 5,
                interval: 0.2,
                to: 'top'
            }
        );
    }
    function stop(){
        _g().getWidgetByName("report0_c").stopMarquee();
        _g().getWidgetByName("report0_c_c").stopMarquee();
    }
    $("[widgetname=REPORT0_C]").hover(function(){
        stop()
    },function(){
        start()
    });
    $("[widgetname=REPORT0_C_C]").hover(function(){
        stop()
    },function(){
        start()
    });
    start()
    }, 200);

    示例:

    鼠标悬停实现多个报表块停止滚动.frm

    2.4JS获取报表块单元格的值

    参考文档:JS获取报表块单元格的值

    新接口写法,见下:

    // 获取单元格的值:
    _g().getWidgetByName('report1').getCellValue('A1')
    // 设置单元格的值:
    _g().getWidgetByName('report0').setCellValue('A1', 'alan')

    2.5JS实现决策报表获取单元格对应值

    参考文档:JS实现决策报表获取单元格对应值

    新接口写法,见下:

    // 获取单元格的值:
    _g().getWidgetByName('report1').getCellValue('A1')
    // 设置单元格的值:
    _g().getWidgetByName('report0').setCellValue('A1', 'alan')

    2.6JS实现按钮获取报表块页码数

    参考文档:JS实现报表按钮获取报表块的页码数

    新接口写法,见下:

    var a = _g().getWidgetByName("report0").getPageIndex() 
    //获取报表块 report0 的当前页码数
    var b = _g().getWidgetByName("report0").getTotalPage(); 
    //获取报表块总页码数,其中 report0 是报表块的名字 alert("当前页码是" + a);
    alert("总页码是" + b);

    2.7JS实现隐藏tab块标题

    参考文档:JS实现隐藏tab块标题

    新接口写法,见下:

    1. tabpane隐藏全部:(tabpane直接添加初始化事件)

    this.invisible();

    或者

    _g().getWidgetByName('tabpane0').invisible();

    2.隐藏某个tab:(tablayout0添加初始化)

    _g().getWidgetByName("tablayout0").setTabVisible("tab1", false);

    2.8JS实现报表按钮控件取到其他控件值

    参考文档:JS实现报表按钮控件取到其他控件值

    新接口写法,见下:

    _g().getWidgetByName('lable0').getValue()

    2.9JS获取决策报表内图表块刷新数据

    参考文档:JS获取决策报表内图表块刷新数据

    注:针对图表的JS,依然采用老的写法;若针对报表块则采用以下写法。

    新接口写法,见下:

    setTimeout(function()
    {     
    var c = _g().getWidgetByName("chart1");     
    c.refresh(); 
    }
    , 500);

    2.10JS实现切换tab显示/隐藏参数面板上的控件

    参考文档:JS实现切换tab显示/隐藏参数面板上的控件

    新接口写法,见下:

    var tabpane = this.getWidgetByName("TABPANE0");
    switch(tabpane.getShowIndex())

        case 0:  
            _g().getWidgetByName('运货商').visible() 
            _g().getWidgetByName('LABEL运货商').visible() 
        break;  
        case 1:  
            _g().getWidgetByName('运货商').invisible() 
            _g().getWidgetByName('LABEL运货商').invisible() 
        break;  
        default:  
        break; 
    }

    2.11JS 实现点击按钮实现超链接功能

    参考文档:JS 实现点击按钮实现超链接功能

    新接口写法,见下:

    _g().getWidgetByName('chart0').changeParameter({"area": area})

    2.12JS实现控件融入背景

    参考文档:JS实现控件融入背景

    一、方法一(推荐):

    1)实现控件和弹出窗口可分别设置背景,步骤见下:

    第一步:添加css,放到工程目录下。body初始化,引用:

    $('<link rel="stylesheet" type="text/css" href="/webroot/help/css/style1.css"/>').appendTo('head');

    css文件直接下载:

    style1.css

    效果如下图:

    image.png

    模板下载:

    控件融入背景.frm

    2)控件和弹窗统一设置背景,步骤见下:

    第一步:添加css,放到工程目录下。body初始化,引用:

    $('<link rel="stylesheet" type="text/css" href="/webroot/help/css/custom.css"/>').appendTo('head');

    css文件直接下载:

    custom.css

    效果如下图:

    image.png

    模板下载:

    控件融入背景(控件和弹窗一起).frm

    二、方法二:

    注:使用方法二,缩放时会存在问题。

    新接口写法,见下:

    setTimeout(function(){        
        var color="transparent";
        var fontColor = "#c0c0c0";
            //数字控件的属性        
            $(".report-main-parameter-container-controller-number").css({"background":color})//设置背景
            $(".report-main-parameter-container-controller-number .bi-input").css({"color":fontColor});//设置字体颜色
            $(".report-main-parameter-container-controller-number .bi-border").css("border","none");//去除边框

            // 文本控件
            $(".report-main-parameter-container-controller-text").css({"background":color,"color":fontColor});//设置背景
            $(".report-main-parameter-container-controller-text .bi-input").css({"color":fontColor});//设置字体颜色
            $(".report-main-parameter-container-controller-text .bi-border").css("border","none");//去除边框
            
            //以下修改下拉单选控件
            $(".report-main-parameter-container-controller-combo >.bi-card").css({"background":color});//设置背景
            $(".report-main-parameter-container-controller-combo .bi-input").css({"color":fontColor});//设置字体颜色
            $(".report-main-parameter-container-controller-combo .bi-border").css("border","none");//去除边框
            $(".report-main-parameter-container-controller-combo .bi-icon-button").css("color", fontColor);//设置点击按钮颜色

            // 下拉复选控件
            $(".report-main-parameter-container-controller-tag-combo-checkbox >.bi-card").css({"background":color});//设置背景
            $(".report-main-parameter-container-controller-tag-combo-checkbox .bi-input").css({"color":fontColor});//设置字体颜色
            $(".report-main-parameter-container-controller-tag-combo-checkbox .bi-border").css("border","none");//去除边框
            $(".report-main-parameter-container-controller-tag-combo-checkbox .bi-icon-button").css("color", fontColor);//设置点击按钮颜色

            // 日期控件
            $(".report-main-parameter-container-controller-datetime").css({"background":color});//设置背景
            $(".report-main-parameter-container-controller-datetime .bi-text").css({"color":fontColor});//设置字体颜色
            $(".report-main-parameter-container-controller-datetime .bi-border").css("border","none");//去除边框
            $(".report-main-parameter-container-controller-datetime .bi-icon-button").css("color", fontColor);//设置点击按钮颜色
    },100)

    2.13JS更改控件样式

    参考文档:JS 更改控件样式

    新接口写法,见下:

    setTimeout(function()
    { $('.report-main-parameter-container-controller-datetime .date-font').css('background', '#9AB0C6').css('border-radius', '0px 5px 5px 0px'); $('.report-main-parameter-container-controller-datetime >div').css('border-radius', '5px'); }
    , 10)

    2.14JS实现决策报表报表块鼠标所在单元格/行的样式

    参考文档:JS实现决策报表报表块鼠标所在单元格/行的样式

    单元格背景,示例如下:

    //鼠标悬浮
    _g().getWidgetByName('report1').makeHeightCell('red', 'mouseover')
    //鼠标点击
    _g().getWidgetByName('report1').makeHeightCell('red', 'mousedown')
    //鼠标悬浮+点击
    _g().getWidgetByName('report1').makeHeightCell('red')

    行字体,示例如下:

    _g().getWidgetByName('report0').makeFontLine(
    {color: 'red',
    fontSize: 25,
    bold:true,
    textShadow:true
    },'mouseover');

    单元格字体,示例如下:

    _g().getWidgetByName('report0').makeFontCell(
    {color: 'red',
    fontSize: 25,
    bold:true,
    textShadow:true
    },'mouseover');

    可支持的参数,如下:

    bold:boolean;//加粗

    italic:boolean;//斜体

    fontFamily:string;//字体

    strikeThrough:boolean;//删除线

    fontSize:number;//字号

    subscript:boolean;//下标

    underLine{

    width:number;

    style:string;

    color:number;

    };//下划线

    textShadow:boolean;//文字阴影

    subscript:boolean;//上标

    color:number;//颜色

    示例:

    _g().getWidgetByName('report0').makeHeightLine('blue', 'mouseover')
    _g().getWidgetByName('report0').makeFontLine(
    {color: 'red',
    fontSize: 25,
    bold:true,
    textShadow:true
    },'mouseover');

    2.15决策报表里使用延时函数实现某些JS效果

    参考文档:决策报表里使用延时函数实现某些JS效果

    新接口写法,见下:

    _g().getWidgetByName('report0').makeHeightLine('red', 'mouseover')

    2.16决策报表控件实现点击查询按钮后才能查询

    参考文档:决策报表控件实现点击查询按钮后才能查询

    新接口写法,见下:

    需要编辑后改成编辑结束事件

    2.17报表块中点击单元格改变颜色再次点击恢复颜色

    参考文档:报表块中点击单元格改变颜色再次点击恢复颜色

    新接口写法,见下:

    _g().getWidgetByName("report0").makeHeightCellHold('red');
    _g().getWidgetByName("report0").makeHeightCellHold('red', true);

    2.18日历组件增加翻页功能

    参考文档:日历组件增加翻页功能

    由于目前一些控件的setValue是异步的,所以setValue之后立刻执行parameterCommit会导致取到的控件的值仍是原来的值,所以需要加个setTimeout。

    示例:

    _g().parameterEl.getWidgetByName("date").setValue(a);
    setTimeout(function()
    {    
    _g().parameterCommit(); 
    }, 100)

    2.19JS实现大屏旋转星空背景

    参考文档:JS实现大屏旋转星空背景

    新接口写法,见下:

    function background() {
    $(".content-container").append('<canvas id="canvas"></canvas>');
    //在body中插入canvas画布,并置于底层
    var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    hue = 217,
    stars = [],
    count = 0,
    maxStars = 1000;
    //设置星星数量
    var canvas2 = document.createElement('canvas'),
    ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
            gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#fff');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');
    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    function random(min, max) {
    if (arguments.length < 2) {
    max = min;
    min = 0;
    }
    if (min > max) {
    var hold = max;
    max = min;
    min = hold;
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var Star = function() {
    this.orbitRadius = random(w / 2 - 50);
    this.radius = random(100, this.orbitRadius) / 10;
    this.orbitX = w / 2;
    this.orbitY = h / 2;
    this.timePassed = random(0, maxStars);
    this.speed = random(this.orbitRadius) / 200000;
    //设置旋转速度
    this.alpha = random(2, 10) / 10;
    count++;
    stars[count] = this;
    }

    Star.prototype.draw = function() {
    var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
    twinkle = random(10);
    if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
    } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
    }
    ctx.globalAlpha = this.alpha;
    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    this.timePassed += this.speed;
    }
    for (var i = 0; i < maxStars; i++) {
    new Star();
    }

    function animation() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.8;
    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
    ctx.fillRect(0, 0, w, h)
    ctx.globalCompositeOperation = 'lighter';
    for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
    };
    window.requestAnimationFrame(animation);
    }
    animation();
    }
    background();
    $(window).resize(function() {
    background();
    })

    2.20JS实现决策报表中不同网页框相互刷新

    参考文档:JS实现决策报表中不同网页框相互刷新

    暂支持写法:

    window.parent._g().getWidgetByName('rHIframe1').reload(); //rHIframe1 为父模板需要刷新的网页框控件名

    2.21JS实现自动隐藏参数面板

    参考文档:JS实现参数面板自动隐藏与显示

    新接口写法,见下:

    在参数面板中添加初始化事件。

    _g().parameterEl.resizableContainer.doClick()

    2.22JS实现视图树赋值时自动展开有值节点

    参考文档:视图树控件介绍

    新接口写法,见下:

    在视图树中添加初始化事件。

    this.enableAutoExpand();

    3.支持老接口方法的表单JS

    4.新自适应自定义JS接口设计方法

    1)获取组件实例

    所有组件操作使用_g().getWidgetByName("xxxx")来获取组件实例。

    部分控件上的自定义js会使用this.options.form来调用,此等价于_g().getWidgetByName("xxxx")

    2)获取dom

    目前有很多场景下的dom操作是通过document、jquery操作去实现,针对这些场景,可以使用_g().getWidgetByName("xxxx").element获取该组件的jquery对象。

    注:禁止直接使用js选择器去选择组件的dom。

    3)设置css

    设置组件下的css,推荐使用div[widgetName="xxxx"]

    注:尽量不用class选择器去选择。

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!