微信小程序集成Tableau報表

Server端用了Spring,其實無所謂的。

public class MobilController {
@RequestMapping(value="/openMobileReport")
	public ModelAndView openMobileReport(HttpServletRequest request,HttpServletResponse response)
	{
		ModelAndView modelAndView = new ModelAndView();	
		
		try
		{
			String queryReportID=(String)request.getParameter("reportID");
			if(queryReportID!=null && !queryReportID.equals(""))
            {
				AccessDB db=new AccessDB();
				String sql="select * from {0}_reports where ID={1}";
				ResultSet rs = db.querydb(sql,queryReportID);
				
				if(rs.next())
				{						
					String views=rs.getString("activeViewUrl").replaceAll("sheets/","");
					
					//獲取用戶的報表服務器映射用戶
					Config setup =new Config();
					String tUserName="";
					tUserName=setup.getProperty("SERVERUSER");
					
					//嘗試登陸Tableau服務器,獲取令牌	
					if(!tUserName.equals(""))
					{									
						String serverHost="http://"+setup.getProperty("SERVERHOST")+":"+setup.getProperty("SERVERPORTAL");
						String token=null;
						
						//是否使用SSL證書方式登錄
						String ssl=setup.getProperty("TABLEAUUSEDSSL");
						if(ssl!=null && !ssl.equals(""))
						{
							if(Boolean.parseBoolean(ssl))	
							{
								serverHost="https://"+setup.getProperty("SERVERHOST")+":"+setup.getProperty("SERVERPORTAL");
								token=HttpRequest.sendSSLPost(serverHost+"/trusted","username="+tUserName);
							}
							else
							{
								token=HttpRequest.sendPost(serverHost+"/trusted","username="+tUserName);		
							}
						}
						else
						{
							token=HttpRequest.sendPost(serverHost+"/trusted","username="+tUserName);	
						}
						
						if(token!=null && !token.equals("") && !token.equals("-1"))
						{										
							sql=db.sqlList.getProperty("change_report_view_status");
							db.updatedb(sql,queryReportID);							
							
							String url=serverHost+"/trusted/"+token+"/views/"+views;
							
							modelAndView = new ModelAndView("openMobileReport");
							
							modelAndView.addObject("SYSTEMNAME", setup.getProperty("SYSTEMNAME"));
							modelAndView.addObject("url",url);
							modelAndView.addObject("token",token);
							modelAndView.addObject("views",views);
					    	modelAndView.addObject("serverHost", serverHost);
					    	
					    	modelAndView.addObject("reportName", rs.getString("reportname"));
					    	modelAndView.addObject("createDate", rs.getDate("createDate"));
					    	modelAndView.addObject("num", rs.getInt("num"));					    	
					    	modelAndView.addObject("description", rs.getString("description"));
					    	
						}
						else
						{						
							modelAndView = new ModelAndView("error");
							modelAndView.addObject("message","當前站點不受服務器信任,請添加站點到Tableau授信服務器列表.");									
						}
					}
					else
					{
						modelAndView = new ModelAndView("error");
						modelAndView.addObject("message","用戶權限不足,無法登陸報表系統,請諮詢管理員添加報表服務器權限.");
					}
					
				}
				else
				{					
					modelAndView = new ModelAndView("error");
					modelAndView.addObject("message","沒有找到目標報表,它可能已經被刪除.");
				}
				rs.close();
				db.close();
			}
			else
			{				
				modelAndView = new ModelAndView("error");
				modelAndView.addObject("message","參數錯誤,請循正式路徑訪問。");							
			}			
		}		
		catch(Exception ex)
		{	
			modelAndView = new ModelAndView("error");
			modelAndView.addObject("message","加載頁面錯誤:"+ex.getMessage());			
		}
		
		return modelAndView;
	}
}

openSmallProgramReport.jsp代碼,其實也無所謂。

<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name='360-fullscreen' content='true' />
<title>${SYSTEMNAME}</title>
<link rel="stylesheet" type="text/css" href="css/themes/customer/easyui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
<script type='text/javascript' src="${serverHost}/javascripts/api/tableau-2.min.js"></script>
<script type='text/javascript' src="js/openSmallProgramReport.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:false" style="overflow:auto;background-color:rgba(255,255,255,0.9);">
    <div style="display:block; background-color:#FFF;color:#666;font-size:0.8rem; padding:10px">
        上傳時間:${createDate}&nbsp;&nbsp;點擊${num}次
    </div>
    <div style="display:block;background-color:#FFF;color:#666;font-size:0.8rem; padding:10px">
        ${description}
        <input type="hidden" name="url" id="url" value="${url}">
    </div>
    <div id="reportContainer" >
    </div>            
</div>
</body>
</html>

 

這個文件用了Jquery easy UI框架,主要是用一個隱藏的input保存一下Tableau的有效訪問地址(帶有token)。然後寫一個openSmallProgramReport.js

var viz=null;
$(document).ready(function ()
{
	try
	{
		var containerDiv = document.getElementById("reportContainer");
		var options = {
			hideTabs: true,
			hideToolbar: true,
			toolbarPosition:'TOP',
			device:'phone'
		};

		if (viz) {viz.dispose();}
		viz = new tableau.Viz(containerDiv, $('#url').val()+"?:embed=yes", options);
	}
	catch(e)
	{
		alert("初始化報表出錯:"+e.message);
	}
});

使用URL生成報表對象。

小程序部分就很簡單了,加一個web-view就行了。

<web-view src="{{reportServer}}/openSmallProgramReport?reportID={{reportID}}">
</web-view>

效果:

先列表,然後點擊展示報表。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章