键盘事件控制场景地图切换场景

  • Last update:  2022-08-19
  • 1. 概述

    1.1 应用场景

    用户实际使用 场景地图 时,可能需要通过翻页笔或者键盘上下键来控制场景切换,那么该如何实现呢?

    1615791222696552.png

    1.2 实现思路

    大屏场景下,通过给决策报表的 body 添加初始化后 JavaScript 事件,给场景地图绑定键盘的上下键事件, 监听上键跳转上一个场景, 下键跳转下一个场景。

    注:支持在场景地图轮播的同时使用键盘事件控制场景切换。

    注:不支持移动端。

    2. 示例

    2.1 准备模板

    此处直接使用 场景切换地图示例 中的模板。

    可以直接在设计器中查找:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\场景切换地图.frm

    也可以点击此处直接下载:场景切换地图.frm

    2.2 添加事件

    给决策报表的 body 添加一个初始化事件,如下图所示:

    1615793237418690.png

    JavaScript 代码如下:

    document.addEventListener('keydown', e => {
         
        //获取图表对象实例
        var chartBridge = Van.Utils.getChartBridge({name:'chart0'});
     
        if (chartBridge && e.keyCode === 38) {//遥控器的上 对应键盘的上keyCode=38 左 37 右 39
            console.log('up');
             
            //切换至上一个场景
            chartBridge.switchScene({direction:'previous'});
            //可以根据自己的需求绑定不同的js事件 比如tab组件切换切换到tab0:
            //_g().options.form.getWidgetByName("tabpane0").showCardByIndex(0);
     
        } else if (chartBridge && e.keyCode === 40) {//遥控器的下 对应键盘的下keyCode=40
            console.log('down');
             
            //切换至下一个场景
            chartBridge.switchScene({direction:'next'});
            //可以根据自己的需求绑定不同的js事件 比如tab组件切换到tab1:
            //_g().options.form.getWidgetByName("tabpane0").showCardByIndex(1);
        }
         
    });

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\键盘事件控制场景地图切换场景.frm

    点击下载模板:键盘事件控制场景地图切换场景.frm

    Attachment List


    Theme: 图表应用
    Already the First
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy