反馈已提交

网络繁忙

大屏常见点击交互效果

  • 文档创建者:帆软Dashboard-Eunice.Xu
  • 历史版本:6
  • 最近更新:HeroZ 于 2023-02-24
  • 在大屏需求规划阶段,需要了解清楚大屏的使用方式,分析展示需求。

    有些大屏为了更好地展示,需要一些动态轮播、闪烁等效果,而有些大屏具有一定的人为操作需要,即观看者需要通过触摸屏幕或远程操作点击大屏,实现诸如跳转页面、弹出窗口、图表钻取等交互需求。



    一、学习资料归纳

    大屏常见交互效果包括点击切换tab页、切换模板、点击弹窗和地图钻取,以下是学习资料归纳:

    交互效果帮助文档
    讲解视频
    点击标签按钮切换tab页Tab块(利用tab块控件实现,最简单的方法)
    JS实现点击超链切换Tab块(用JS自定义按钮实现,较复杂的方法)
    tab轮播
    点击按钮切换大屏模板
    JS实现点击跳转页面和定时跳转页面(包括了定时跳转模板、点击跳转模板的方法)点击跳转模板
    点击按钮弹出新窗口JS实现点击超链打开对话框报表并传参点击弹出窗口
    点击地图钻取下一层级钻取地图简介地图钻取效果


    二、应用场景

    1、点击切换tab页


    使用场景:

    每个tab页中含有一个或多个元素,如表格、图表等,点击tab页标签可以实现tab切换,方便查看更多信息。这类交互需求在驾驶舱大屏中最为常见,在会议室、领导办公室中的大屏,多个tab页的切换方便了查看和分析。


    1.1 利用内置的tab块控件实现

    如下图所示的模板中,使用了FineReport内置的tab块控件实现点击切换tab,这种方式的优势是简单易懂做,由于tab块标签的样式比较固定,对于风格简约的大屏更适用。

    tab切换示例.gif

    点击下载该示例模板:学生健康状况分析大屏


    1.2 利用JS自定义按钮实现

    如下图所示的模板中,以智慧树图的气泡作为按钮样式,其他组件分装在3个tab页中,用JS实现了tab切换。

    这种方式的优势是用户可以自定义按钮的形状、样式,可以结合智慧树等官方图表,实现更好的按钮效果,比tab块具有更自由的视觉设计空间,适合对视觉设计有精细化要求的大屏。

    智慧树tab切换示例.gif

    点击下载该示例模板:集团综合管理驾驶舱


    *1.3 利用条件属性自定义按钮实现

    如下图所示的模板中,使用report块自定义按钮样式,结合条件属性、超链接传递参数,同样实现了点击切换tab。

    切换tab示例模板.gif

    点击下载该示例模板:年中述职-人资


    2、点击按钮切换大屏


    使用场景:

    在一些驾驶舱类大屏中,为了分析更多的数据,一张大屏的内容可能无法覆盖所有要展示的信息,此时可以在大屏上添加一个自定义按钮,用JS实现跳转到另一张模板,查看一个细分场景的大屏。

    如果有多张细分场景的大屏要展示,还可以制作一个“大屏首页”,可以点击跳转任何一张细分场景的大屏。


    如下图所示的模板中,以智慧树图上的气泡作为按钮,结合JS跳转模板的方式,实现了点击切换大屏的需求。

    智慧树点击跳转.gif

    点击下载该示例模板:银行在线监管系统


    3、点击弹出新窗口


    使用场景:

    有时候,我们希望点击大屏上的某处显示详细信息,但又不希望直接跳转到另一张大屏,此时可以用弹出窗口来解决。此类用法适合弹出信息不多的场景,若信息量较大,那么打开新的页面显示更合适。


    下图中的模板区别于上面的用法是讲跳转模板做成了点击弹窗,这样可以在窗口中获取某个细分板块的信息,关闭窗口回到原模板,比跳转模板更便捷。

    点击大屏上的按钮弹窗.gif


    4、点击地图钻取到下层


    使用场景:

    地图在大屏上是十分常见的元素,有时候地图数据不在一个层级,如全国所有省份的数据和某重点省份的市区数据,不便于在地图上全部显示,这时候常用的解决方法是钻取地图——先显示最上层所有的数据,再往下层钻取,了解更深层级的信息。


    如下图中的模板,初始化的中国地图显示了各个省份的项目数量,点击广东省后钻取到广东省的地图,展示广东省下辖市区的项目数据。

    点击钻取地图.gif

    点击下载该示例模板:年终述职-项目


    附件列表


    主题: 功能场景案例
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持