zoukankan      html  css  js  c++  java
  • 通过外部查询按钮实现仪表板Dashboard数据过滤

    仪表板Dashboard除过独立访问查看外,很多时候也会被嵌入到业务系统的界面中来使用。
    为了确保风格一致或者其他系统页面本身有自己的查询功能,就需要将业务系统或者网页中原有的查询功能作用到通过
    iframe嵌入的仪表板中,以实现数据过滤查询。

    Wyn Enterprise实现该类场景的核心点是:将外部的查询条件传递给仪表板的参数。
    具体可以通过URL传参的方法来实现。

    示例效果:
    顶部参数面板为业务系统页面;可视化部分为嵌入的仪表板。


    具体实现步骤
    一.设计仪表板,并在仪表板中添加参数,将参数设置为全局过滤器。
    1.设计仪表板,并添加需要传递的参数;


    2.将需要作用的参数添加到仪表板过滤器或者队对应图表的过滤条件上;


    3.保存预览,在[新窗口]中打开,获取仪表板的独立的URL;


    4.获取token,将token拼接到url后面,形成带有用户认证信息的完整URL.
    参考:https://help.grapecity.com.cn/pages/viewpage.action?pageId=50021916
    URL参数说明:https://help.grapecity.com.cn/pages/viewpage.action?pageId=50022901

    5.在示例页面中嵌入仪表板,并处理参数传递机制.

    <html>
    <head>
    </head>
    <body>
            <script>
                    /*按钮命令传递条件到URL*/
                    function pass_para(){
                            var area=document.getElementById("txt_area").value;
                            var zfff=document.getElementById("txt_zfff").value;
                            /*URL字符串根据实际情况替换*/
                            var urlStr="http://localhost:51980/dashboards/view/4dd3a263-fac6-4f6b-8a75-84432c3fffe8?theme=blue&lng=zh&dp={%22area%22:[%22"+
                            area +"%22],%22zfff%22:[%22" + zfff + "%22]}&token=d382dbad586bea998680265744d6bf94ee4a55822623e37b46e4ec6e4c66162b&toolbar=hide"
                            document.getElementById("dashboard").src=urlStr;
                    }
            </script>
            <div>
                    <div style="background-color:gray;height:60px;">
                    <span>
                    <label>地区</label>
                    <input id="txt_area" style="height:50px;" type="textbox">
                   
                    <label>支付方式</label>
                    <input id="txt_zfff" style="height:50px;" type="textbox">
                   
                    <input type="button" style="height:30px;50px;" value="test">
                    </span>
                    </div>
            </div>
            <br />
            <div>
                    <iframe id="dashboard" style="height:100%;100%"></iframe>
            </div>
    </body>
    </html>
    

      

  • 相关阅读:
    DG查看恢复进度
    dataguard主备延迟多长时间的查询方法
    DG动态性能视图详解
    Django之ORM的增删改查操作流程
    IPython
    render函数和redirect函数的区别+反向解析
    http状态码
    图的基本概念
    图的遍历
    vue之webpack打包工具的使用
  • 原文地址:https://www.cnblogs.com/edoo/p/13407687.html
Copyright © 2011-2022 走看看