finereport跑马灯效果制作

跑马灯效果经常用于前端页面的展示，数据量超出页面展示范围时，采用自动滚动来动态显示数据。在帆软报表中，经常使用于普通报表和fvs大屏，决策报表是这两者的过度，功能上比较鸡肋，应用和普通报表差不多。

普通报表跑马灯制作

1准备数据，样式调整，单元格冻结

image.png

都是些比较基本操作，注意一点的是想要数据的展示界面默认的重复数据不合并，需要将单元格的格式调整为列表。

image.png

2模板web属性添加事件js代码

image.png

_g().startMarquee(
    {
        stopOnHover:true,//鼠标悬停仍然滚动不停止
        offset:2,//控制滚动距离
        interval:0.3,//控制滚动速度
        to:top//默认向上滚动 top left 
    }
    );

3呈现效果

鼠标悬停时页面停止滚动.gif

FVS大屏跑马灯制作

fvs大屏跑马灯主要用于富文本、标题以及表格的滚动。fvs将数据滚动做成了功能组件，就是说不写js也能实现滚动的效果。

表格滚动

1.数据准备，样式调整，单元格冻结

image.png

2.开启跑马灯效果

image.png

滚动方式

1）首尾相接：表格滚动到结尾行后，自动连接着表格首行，继续滚动。
2）从头开始：表格滚动到结尾行后，跳转到首行，重新滚动。

滚动方向包括：向上、向下、向左、向右。

1）表格组件：默认向上。横向扩展表格可使用向左或向右滚动。
2）富文本/标题组件：默认向左。

滚动速度

滚动速度默认值为 50px/s，表示滚动完 50px 距离需要 1s ，支持修改。

滚动间隔

滚动间隔表示每次滚动完成后停留的时间（与上一次滚动的位置重叠视为滚动完成），若间隔为 0 ，则持续滚动不停留。

效果呈现

[图片上传失败...(image-89cdc7-1692685747655)]

向左	向上
[图片上传失败...(image-6b7f79-1692685747655)]	[图片上传失败...(image-9f9eec-1692685747655)]

js实现大屏跑马灯效果

除了之前的步骤，进行以下操作：

image.png

代码

setTimeout(() => {
    duchamp.getWidgetByName("表格").startMarquee(       
{           
      offset: 2,    //每次滚动的距离为 2 px            
      interval: 0.1,   //滚动间隔时长为 0.1 秒
      stopOnHover: false,   //鼠标悬浮不暂停 
      to:'top'    //向上滚动
     }
); }, 500)

点击按钮停止跑马灯

image.png

多个页面添加跑马灯事件

代码：

duchamp.on("storychange", (current) => {
        setTimeout(() => {
                if (current === "页面1") {
                        duchamp.getWidgetByName("表格").startMarquee({
                                offset: 2,
                                interval: 0.1,
                                stopOnHover: false,
                                to: 'top'
                        });
                };
                if (current === "页面2") {
                        duchamp.getWidgetByName("表格").startMarquee()
                }
        }, 500);
})

image.png

html实现不规则滚屏效果

1.配置数据，格式设置

image.png

2.设置公式，其他格式调整

image.png

公式

"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='left' height='250' width='400' 
hspace='0' vspace='2' loop='-1' scrollamount='"+(rand()*(11-1)+1)+"' scrolldelay='100' onMouseOut='this.start()' 
onMouseOver='this.stop()'>" + REPLACE(A3, ",", "<br />") + "</marquee>"

参数解释

参数	含义
direction	表示滚动的方向，值可以是 left，right，up，down 默认为 left
behavior	表示滚动的方式，值可以是 scroll（连续滚动）slide（滑动一次）alternate（来回滚动）
loop	表示循环的次数，值是正整数，loop='-1' 表示为无限循环
scrollamount	表示运动速度，值是正整数，默认为 6
scrolldelay	表示停顿时间，值是正整数，默认为 0，单位是毫秒
align	表示元素的垂直对齐方式，值可以是 top，middle，bottom默认为 middle
bgcolor	表示运动区域的背景色，值是 16 进制的 RGB 颜色，默认为白色
height	表示运动区域的高度，值是正整数（单位是像素）或百分数
width	表示运动区域的宽度，值是正整数（单位是像素）或百分数
hspace	表示元素到区域边界的水平距离，值是正整数，单位是像素
vspace	表示元素到区域边界的垂直距离，值是正整数，单位是像素
onmouseover=this.stop()	表示当鼠标以上区域的时候滚动停止
onmouseout=this.start()	表示当鼠标移开的时候又继续滚动
style	表示添加样式text-align:center; 指文本水平居中vertical-align:middle; 指文本垂直居中display:table-cell; 指让标签元素以表格单元格的形式呈现

效果：

GIF.gif